'use client';

import { useTranslations } from 'next-intl';
import { LabCaseCommentsPanel } from '@/components/ui/lab/LabCaseCommentsPanel';
import { treatmentsApi } from '@/lib/api/treatments';
import type { TreatmentDetailDraft } from '@/types/treatment';

interface DetailLabCaseCommentsSectionProps {
  detail: TreatmentDetailDraft;
  canPost: boolean;
  onError?: (message: string) => void;
}

export function DetailLabCaseCommentsSection({
  detail,
  canPost,
  onError,
}: DetailLabCaseCommentsSectionProps) {
  const t = useTranslations('treatment');
  const caseId = detail.labCaseId;

  if (!caseId) return null;

  return (
    <div className="space-y-2 border-t border-border/60 pt-4">
      <div>
        <p className="text-xs font-medium text-text-secondary">{t('labCaseCommentsTitle')}</p>
        <p className="text-[11px] text-text-muted mt-0.5">{t('labCaseCommentsHint')}</p>
      </div>
      <LabCaseCommentsPanel
        caseId={caseId}
        canPost={canPost}
        canToggleVisibility={false}
        loadComments={async () => {
          const response = await treatmentsApi.listLabCaseComments(caseId);
          return response.data;
        }}
        onPost={async (body) => {
          const response = await treatmentsApi.addLabCaseComment(caseId, { body });
          return response.data;
        }}
        onError={onError}
      />
    </div>
  );
}