import { demoCase } from '@/lib/demoData';
import { Fingerprint, Cake, User, Stethoscope, CalendarClock, UserCog, ClipboardCheck, RefreshCw } from 'lucide-react';

const rows = [
  ['Case ID', demoCase.case_id, Fingerprint],
  ['Patient', demoCase.patient, User],
  ['Reference', demoCase.ref, Fingerprint],
  ['Age / Gender', `${demoCase.age} / ${demoCase.gender}`, Cake],
  ['Case Type', demoCase.case_type, Stethoscope],
  ['Arch', demoCase.arch, Stethoscope],
  ['Status', demoCase.status, ClipboardCheck],
  ['Technician', demoCase.technician, UserCog],
  ['Reviewer', demoCase.reviewer, ClipboardCheck],
  ['Due Date', demoCase.due_date, CalendarClock],
  ['Stage', demoCase.stage, ClipboardCheck],
  ['Updated', demoCase.updated, RefreshCw]
];

const CaseOverview = () => (
  <div className="glass-panel p-3">
    <div className="mb-2.5 flex items-center justify-between">
      <span className="text-[10px] uppercase tracking-[.18em] text-cyan-400">Case Overview</span>
      <span className="rounded border border-cyan-400/30 bg-cyan-400/10 px-2 py-0.5 text-[9px] font-semibold uppercase tracking-wider text-cyan-300">In Design</span>
    </div>
    <div className="grid grid-cols-2 gap-x-3 gap-y-2">
      {rows.map(([label, value, Icon]) => (
        <div key={label} className="flex items-center gap-2">
          <Icon className="h-3 w-3 shrink-0 text-slate-600" />
          <div className="min-w-0">
            <div className="text-[8px] uppercase tracking-wider text-slate-600">{label}</div>
            <div className="truncate text-[11px] text-slate-200">{value}</div>
          </div>
        </div>
      ))}
    </div>
  </div>
);
export default CaseOverview;