import { useState } from 'react';
export default function RecordForm({ title, fields, onSave, onCancel, submitLabel = 'Save' }) {
  const [f, setF] = useState({});
  const set = (k, v) => setF({ ...f, [k]: v });
  return (
    <form onSubmit={e => { e.preventDefault(); onSave(f); }} className="space-y-4">
      <h3 className="text-sm font-semibold uppercase tracking-wider text-violet-400">{title}</h3>
      <div className="grid gap-3 sm:grid-cols-2">
        {fields.map(field => (
          <label key={field.key} className="text-sm text-slate-300">{field.label}
            {field.type === 'select' ? (
              <select className="workshop-input" value={f[field.key] || ''} onChange={e => set(field.key, e.target.value)}>
                <option value="">Select…</option>
                {field.options.map(o => <option key={o}>{o}</option>)}
              </select>
            ) : field.type === 'checkbox' ? (
              <label className="choice-card mt-2"><input type="checkbox" checked={!!f[field.key]} onChange={e => set(field.key, e.target.checked)} /><span>{field.checkLabel || field.label}</span></label>
            ) : (
              <input type={field.type || 'text'} step={field.type === 'number' ? 'any' : undefined} className="workshop-input" value={f[field.key] ?? ''} onChange={e => set(field.key, field.type === 'number' ? (e.target.value === '' ? '' : Number(e.target.value)) : e.target.value)} />
            )}
          </label>
        ))}
      </div>
      <label className="text-sm text-slate-300">Notes<textarea className="workshop-input min-h-20" value={f.notes || ''} onChange={e => set('notes', e.target.value)} /></label>
      <div className="flex gap-2"><button className="btn-primary">{submitLabel}</button><button type="button" className="btn-secondary" onClick={onCancel}>Cancel</button></div>
    </form>
  );
}