import StatusPill from '@/components/workshop/StatusPill';
export default function IdentificationTab({ component }) {
  const fields = [
    ['Manufacturer', component.manufacturer], ['Product family', component.product_family],
    ['Exact model', component.model], ['Variant', component.variant || '—'],
    ['Article number', component.article_number || '—'], ['Serial number', component.serial_number || '—'],
    ['Hardware revision', component.hardware_revision || '—'], ['Firmware revision', component.firmware_revision || '—'],
    ['Category', component.category], ['Data source', component.data_source],
    ['Confidence', component.confidence], ['Status', component.status],
  ];
  return (
    <div className="space-y-5">
      <p className="text-sm text-slate-400">Exact model and variant identification. Different variants are never combined into one generic record.</p>
      <div className="grid gap-3 sm:grid-cols-2">
        {fields.map(([label, val]) => (
          <div key={label} className="rounded-xl border border-white/10 bg-white/5 p-3">
            <p className="text-xs uppercase tracking-wider text-slate-500">{label}</p>
            <p className="mt-1 text-sm text-slate-200">{val || '—'}</p>
          </div>
        ))}
      </div>
      <div className="rounded-xl border border-violet-400/20 bg-violet-400/5 p-4">
        <p className="text-sm text-violet-200"><strong>Cover Ready:</strong> {component.cover_ready ? 'Yes' : 'No — required dimensions incomplete'}</p>
      </div>
    </div>
  );
}