'use client';

import { useTranslations } from 'next-intl';
import {
  prosthesisTypeLabelStyleFromCatalog,
  splitProsthesisGroupCode,
} from '@/components/treatment/prosthesisTypeDisplay';
import {
  PROSTHESIS_JOB_PATH_SEP,
  prosthesisJobPathLabel,
  prosthesisJobPathParts,
} from '@/components/treatment/prosthesisJobPath';
import type { ProsthesisCatalogEntry } from '@/types/treatment-catalog';

interface ProsthesisStackedTypeLabelProps {
  code: string;
  catalog: readonly ProsthesisCatalogEntry[];
  className?: string;
  title?: string;
}

export function ProsthesisStackedTypeLabel({
  code,
  catalog,
  className,
  title,
}: ProsthesisStackedTypeLabelProps) {
  const t = useTranslations('prosthesis');
  const tr = (key: string) => t(key as never);
  const parts = splitProsthesisGroupCode(code);
  const tooltip = title?.trim() || prosthesisJobPathLabel(code, catalog, tr);

  return (
    <span className={className} title={tooltip}>
      {parts.map((part, index) => {
        const path = prosthesisJobPathParts(part, catalog, tr);
        return (
          <span key={`${part}-${index}`}>
            {index > 0 ? <span className="text-text-muted"> + </span> : null}
            {path.ancestors.length > 0 ? (
              <span className="font-normal text-text-muted">
                {path.ancestors.join(PROSTHESIS_JOB_PATH_SEP)}
                {PROSTHESIS_JOB_PATH_SEP}
              </span>
            ) : null}
            <span style={prosthesisTypeLabelStyleFromCatalog(part, catalog)}>{path.leaf}</span>
          </span>
        );
      })}
    </span>
  );
}
