'use client';

import { useTranslations } from 'next-intl';
import { purposeSwatchStyle } from '@/components/appointments/appointmentPurposeStyles';
import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';

interface AppointmentScheduleLegendProps {
  treatmentCatalog: TreatmentCatalogEntry[];
}

export function AppointmentScheduleLegend({
  treatmentCatalog,
}: AppointmentScheduleLegendProps) {
  const t = useTranslations('appointments');

  if (treatmentCatalog.length === 0) {
    return null;
  }

  return (
    <div className="surface-panel px-4 py-3">
      <p className="text-xs font-medium text-text-secondary mb-2">{t('legend')}</p>
      <div className="flex flex-wrap gap-3">
        {treatmentCatalog.map((entry) => (
          <div key={entry.code} className="flex items-center gap-1.5 text-xs text-text-secondary">
            <span
              className="inline-block h-3 w-3 rounded-sm border"
              style={purposeSwatchStyle(entry.code, treatmentCatalog)}
            />
            {entry.label}
          </div>
        ))}
      </div>
    </div>
  );
}
