'use client';

import { useTranslations } from 'next-intl';
import { formatToothList } from '@/components/treatment/prosthesisTypeDisplay';
import { ProsthesisStackedTypeLabel } from '@/components/ui/lab/ProsthesisStackedTypeLabel';
import type { ProsthesisTaskGroup } from '@/components/lab/taskListGrouping';
import type { ProsthesisCatalogEntry } from '@/types/treatment-catalog';

interface TaskProsthesisGroupHeaderProps {
  group: ProsthesisTaskGroup;
  prosthesisCatalog: readonly ProsthesisCatalogEntry[];
}

export function TaskProsthesisGroupHeader({
  group,
  prosthesisCatalog,
}: TaskProsthesisGroupHeaderProps) {
  const t = useTranslations('tasks');
  const tTreatment = useTranslations('treatment');
  const archLabels = {
    UA: tTreatment('selectedArchUpper'),
    LA: tTreatment('selectedArchLower'),
  };

  return (
    <div className="flex flex-wrap items-center gap-2 px-3 py-1.5 bg-background-secondary/30 border-b border-border/40">
      <ProsthesisStackedTypeLabel
        className="min-w-0 whitespace-normal break-words text-xs font-medium"
        code={group.prosthesisTypeCode}
        catalog={prosthesisCatalog}
      />
      <span className="text-xs text-text-secondary">
        {t('teethLabel', { teeth: formatToothList(group.teeth, archLabels) })}
      </span>
    </div>
  );
}