import { useState } from 'react';
const categories=['Socket','Knee','Pylon','Tube clamp','Foot','Ankle','Rotation adapter','Quick-release unit','Vacuum system','Valve','Lock','Sleeve','Liner','Osseointegration connector','Arm joint','Elbow','Wrist','Hand','Battery','Charger','Custom component'];
export default function ComponentForm({ initial={}, onSave, onCancel }) { const [f,setF]=useState(initial); const input=(k,l)=><label className="text-sm text-slate-300">{l}<input className="workshop-input" value={f[k]||''} onChange={e=>setF({...f,[k]:e.target.value})}/></label>; return <form onSubmit={e=>{e.preventDefault();onSave(f)}} className="grid gap-4 md:grid-cols-2">{input('manufacturer','Manufacturer')}{input('product_family','Product family')}{input('model','Exact model')}{input('variant','Exact variant')}{input('article_number','Article number')}{input('serial_number','Serial number (optional)')}{input('hardware_revision','Hardware revision')}{input('firmware_revision','Firmware revision (if applicable)')}<label className="text-sm text-slate-300">Category<select className="workshop-input" value={f.category||'Custom component'} onChange={e=>setF({...f,category:e.target.value})}>{categories.map(x=><option key={x}>{x}</option>)}</select></label>{input('dimensions','Dimensions')}{input('connection_types','Connection types')}{input('access_requirements','Access requirements')}{input('keep_out_zones','Keep-out zones')}{input('source_document','Source document')}{input('source_url','Source URL')}<p className="rounded-xl bg-amber-400/10 p-3 text-xs text-amber-200 md:col-span-2">Different variants are never combined into one generic record. Manufacturer values require an official source, verification date and verifier. They are never final cover fit dimensions.</p><div className="flex gap-2 md:col-span-2"><button className="btn-primary">Save component</button><button type="button" className="btn-secondary" onClick={onCancel}>Cancel</button></div></form> }