import { useState } from 'react';
import FormField from '@/components/customers/FormField';
import { contactFields, fundingFields } from '@/components/customers/customerFields';
export default function CustomerForm({ initial = {}, onSave, onCancel }) { const [form,setForm] = useState(initial); const [saving,setSaving] = useState(false); const change=(k,v)=>setForm({...form,[k]:v}); const submit=async e=>{e.preventDefault();setSaving(true);await onSave(form);setSaving(false)}; return <form onSubmit={submit} className="space-y-6"><section><h2 className="section-title">Identity & contact</h2><div className="grid gap-4 md:grid-cols-2">{contactFields.map(f=><FormField key={f[0]} field={f} value={form[f[0]]} onChange={change}/>)}</div></section><section><h2 className="section-title">Funding & invoicing</h2><div className="grid gap-4 md:grid-cols-2">{fundingFields.map(f=><FormField key={f[0]} field={f} value={form[f[0]]} onChange={change}/>)}</div></section><label className="block text-sm text-slate-300">Internal notes<textarea className="workshop-input min-h-24" value={form.internal_notes || ''} onChange={e=>change('internal_notes',e.target.value)}/></label><div className="flex justify-end gap-3"><button type="button" onClick={onCancel} className="btn-secondary">Cancel</button><button disabled={saving} className="btn-primary">{saving ? 'Saving…' : 'Save customer'}</button></div></form> }