import { PageSection } from "@/components/section/PageSection";
import { MOCK_PROBLEM_DIAGNOSIS } from "@/features/report/constants/mock_problem_diagnosis";
import type { DiagnosisItem } from "@/features/report/types/diagnosis";
import { ProblemDiagnosisCard } from "@/features/report/ui/diagnosis/ProblemDiagnosisCard";

type ReportDiagnosisSectionProps = {
  items?: DiagnosisItem[];
};

export function ReportDiagnosisSection({ items = MOCK_PROBLEM_DIAGNOSIS }: ReportDiagnosisSectionProps) {
  if (items.length === 0) {
    return (
      <PageSection id="problem-diagnosis" title="Critical Issues" subtitle="핵심 문제 진단" dark>
        <p className="body-14 text-lavender-200 break-keep">등록된 핵심 진단 항목이 없습니다.</p>
      </PageSection>
    );
  }

  return (
    <PageSection id="problem-diagnosis" title="Critical Issues" subtitle="핵심 문제 진단" dark>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {items.map((item, i) => (
          <ProblemDiagnosisCard key={`${item.category}-${i}`} item={item} index={i} />
        ))}
      </div>
    </PageSection>
  );
}