dyolink/frontend/src/components/ui/lab/TaskProsthesisGroupHeader.tsx

'use client';

import { useTranslations } from 'next-intl';
import { Badge } from '@/components/ui/shared/Badge';
import { formatToothList, prosthesisTypeBadgeStyleFromCatalog } from '@/components/treatment/prosthesisTypeDisplay';
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">
      <Badge
        fixedWidth={false}
        truncate
        title={group.prosthesisTypeLabel}
        style={prosthesisTypeBadgeStyleFromCatalog(group.prosthesisTypeCode, prosthesisCatalog)}
        className="max-w-[10rem]"
      >
        {group.prosthesisTypeLabel}
      </Badge>
      <span className="text-xs text-text-secondary">
        {t('teethLabel', { teeth: formatToothList(group.teeth, archLabels) })}
      </span>
    </div>
  );
}