import { useState } from 'react';
export default function MeasurementEntry({ definition, onSave, onSkip, busy }) { const [value,setValue]=useState(''); const [unit,setUnit]=useState('mm'); const [confidence,setConfidence]=useState('High'); const [notes,setNotes]=useState(''); const [reason,setReason]=useState(''); const [photo,setPhoto]=useState(null); return <div className="space-y-5"><div className="grid gap-4 sm:grid-cols-3"><label className="text-sm text-slate-300 sm:col-span-2">Value<input autoFocus type="number" step="any" inputMode="decimal" className="workshop-input text-2xl" value={value} onChange={e=>setValue(e.target.value)} aria-label={`${definition.name} value`}/></label><label className="text-sm text-slate-300">Unit<select className="workshop-input" value={unit} onChange={e=>setUnit(e.target.value)}><option>mm</option><option>cm</option></select></label><label className="text-sm text-slate-300">Confidence<select className="workshop-input" value={confidence} onChange={e=>setConfidence(e.target.value)}><option>High</option><option>Medium</option><option>Low</option></select></label><label className="text-sm text-slate-300 sm:col-span-2">Notes<input className="workshop-input" value={notes} onChange={e=>setNotes(e.target.value)}/></label><label className="text-sm text-slate-300 sm:col-span-3">Optional photograph<input type="file" accept="image/*" className="workshop-input" onChange={e=>setPhoto(e.target.files?.[0]||null)}/></label></div><button disabled={busy||!value} onClick={()=>onSave({value,entered_unit:unit,confidence,notes,photo})} className="btn-primary w-full">{busy?'Saving…':'Save & continue'}</button><div className="flex gap-2"><input className="workshop-input mt-0" placeholder="Reason required to skip" value={reason} onChange={e=>setReason(e.target.value)}/><button disabled={!reason||busy} onClick={()=>onSkip(reason)} className="btn-secondary shrink-0">Skip</button></div></div> }