import { Copy, Pencil, Archive, RotateCcw, Ruler } from 'lucide-react';
import { Link } from 'react-router-dom';
import StatusPill from '@/components/workshop/StatusPill';
export default function ComponentCard({ item, onEdit, onCopy, onToggle }) { const archived=item.record_state==='archived'; return <article className="panel p-5"><div className="flex justify-between"><div><p className="text-xs font-semibold uppercase tracking-wider text-violet-400">{item.category}</p><h2 className="mt-1 text-lg font-semibold text-white">{item.manufacturer} {item.model}{item.variant?` ${item.variant}`:''}</h2>{item.article_number&&<p className="text-xs text-slate-500">Article {item.article_number}</p>}</div><StatusPill tone={item.confidence==='High'?'green':'amber'}>{item.confidence}</StatusPill></div><p className="mt-3 text-sm text-slate-400">{item.dimensions||'No dimensions entered. Source verification required.'}</p><p className="mt-2 text-xs text-slate-500">{item.data_label}</p><div className="mt-4 flex flex-wrap gap-2"><Link to={`/components/${item.uuid}/dimensions`} className="btn-primary"><Ruler/>Dimensions</Link><button className="icon-btn" onClick={()=>onEdit(item)} aria-label="Edit component"><Pencil/></button><button className="icon-btn" onClick={()=>onCopy(item)} aria-label="Copy as customer-specific component"><Copy/></button><button className="icon-btn" onClick={()=>onToggle(item)} aria-label={archived?'Restore component':'Archive component'}>{archived?<RotateCcw/>:<Archive/>}</button></div></article> }