const items = [
  { label: 'Libre', className: 'bg-primary' },
  { label: 'Reservado', className: 'bg-reserved' },
];

export function BookingStatusLegend() {
  return (
    <div className="flex flex-wrap items-center gap-5 text-sm text-muted-foreground">
      {items.map((item) => (
        <span key={item.label} className="inline-flex items-center gap-2">
          <span className={`size-3 rounded-full ${item.className}`} />
          {item.label}
        </span>
      ))}
    </div>
  );
}