'use client';

import { useTranslations } from 'next-intl';
import { TreatmentTypeBadge } from '@/components/ui/treatment/TreatmentTypeBadge';
import { treatmentTypeLabelFromCatalog } from '@/components/shared/treatmentTypeDisplay';
import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
import type { PastTreatmentDetail } from '@/types/treatment';

interface TreatmentHistoryDetailLineProps {
  detail: PastTreatmentDetail;
  detailNumber: number;
  treatmentCatalog: TreatmentCatalogEntry[];
}

export function TreatmentHistoryDetailLine({
  detail,
  detailNumber,
  treatmentCatalog,
}: TreatmentHistoryDetailLineProps) {
  const t = useTranslations('treatment');
  const teeth = detail.teeth.length ? [...detail.teeth].sort().join(', ') : t('teethNone');
  const attachmentCount = detail.attachmentMetas?.length ?? 0;

  return (
    <div className="flex items-center gap-2 min-w-0 text-[11px] leading-tight">
      <span className="text-text-muted tabular-nums shrink-0">{detailNumber}.</span>
      <TreatmentTypeBadge
        type={detail.treatmentType}
        label={treatmentTypeLabelFromCatalog(detail.treatmentType, treatmentCatalog)}
      />
      <span className="text-text-secondary truncate min-w-0">{teeth}</span>
      {attachmentCount > 0 && (
        <span className="text-text-muted shrink-0 tabular-nums">
          {t('detailAttachmentCount', { n: attachmentCount })}
        </span>
      )}
    </div>
  );
}