import { useQR } from '../../../context/QRContext';
import { TextInput } from '../../ui/TextInput';

export function VCardForm() {
  const { state, dispatch } = useQR();
  const set = (field: string, value: string) =>
    dispatch({ type: 'SET_FORM_FIELD', qrType: 'vcard', field, value });
  const f = state.formData.vcard;
  return (
    <div className="flex flex-col gap-4">
      <div className="flex gap-3">
        <TextInput label="First Name" value={f.firstName} onChange={v => set('firstName', v)} placeholder="John" />
        <TextInput label="Last Name" value={f.lastName} onChange={v => set('lastName', v)} placeholder="Doe" />
      </div>
      <TextInput label="Phone" value={f.phone} onChange={v => set('phone', v)} placeholder="+1 234 567 8900" type="tel" />
      <TextInput label="Email" value={f.email} onChange={v => set('email', v)} placeholder="john@example.com" type="email" />
      <TextInput label="Company" optional value={f.company} onChange={v => set('company', v)} placeholder="Acme Inc." />
      <TextInput label="Job Title" optional value={f.jobTitle} onChange={v => set('jobTitle', v)} placeholder="Software Engineer" />
      <TextInput label="Website" optional value={f.website} onChange={v => set('website', v)} placeholder="https://example.com" type="url" />
      <TextInput label="Address" optional value={f.address} onChange={v => set('address', v)} placeholder="123 Main St, City, Country" />
    </div>
  );
}