import type { ProcurementMaterial } from '@/types';

interface DetailField {
  label: string;
  value: string;
}

interface MaterialDetailPanelProps {
  row: ProcurementMaterial;
}

export function MaterialDetailPanel({ row }: MaterialDetailPanelProps) {
  const left: DetailField[] = [
    { label: '技术标准', value: row.technical_standard },
    { label: '技术要求', value: row.technical_requirement },
    { label: '试验测试要求', value: row.test_requirement },
    { label: '质保期', value: row.warranty_period },
    { label: '发票种类', value: row.invoice_type },
    { label: '备注', value: row.remarks },
  ];
  const right: DetailField[] = [
    { label: '材质要求', value: row.material_requirement },
    { label: '适用条件', value: row.applicable_conditions },
    { label: '验收说明', value: row.acceptance_note },
    { label: '交货期限', value: row.deadline },
    { label: '收货地址', value: row.delivery_address },
  ];
  return (
    <div className="grid grid-cols-2 gap-x-12 gap-y-4 px-8 py-5 bg-muted/40 text-sm">
      <div className="space-y-4">
        {left.map(f => (
          <div key={f.label}>
            <p className="text-xs text-muted-foreground mb-0.5">{f.label}</p>
            <p className="text-foreground">{f.value || '-'}</p>
          </div>
        ))}
      </div>
      <div className="space-y-4">
        {right.map(f => (
          <div key={f.label}>
            <p className="text-xs text-muted-foreground mb-0.5">{f.label}</p>
            <p className="text-foreground">{f.value || '-'}</p>
          </div>
        ))}
      </div>
    </div>
  );
}
