interface BillingInfoProps {
  data: {
    name?: string;
    address?: string;
    city?: string;
    postal?: string;
    country?: string;
  };
  onChange: (field: string, value: string) => void;
}

export default function BillingInfo({ data, onChange }: BillingInfoProps) {
  return (
    <div className="space-y-4">
      <h3 className="font-medium text-lg mb-4">ที่อยู่ออกใบเสร็จ</h3>
      <div>
        <label className="block text-sm font-medium mb-1">ชื่อ-นามสกุล</label>
        <input
          type="text"
          value={data.name || ''}
          onChange={(e) => onChange('name', e.target.value)}
          className="w-full border rounded-lg px-3 py-2"
          placeholder="ชื่อ-นามสกุล"
        />
      </div>
      <div>
        <label className="block text-sm font-medium mb-1">ที่อยู่</label>
        <textarea
          value={data.address || ''}
          onChange={(e) => onChange('address', e.target.value)}
          className="w-full border rounded-lg px-3 py-2 h-24"
          placeholder="ที่อยู่"
        />
      </div>
      <div className="grid grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium mb-1">จังหวัด</label>
          <input
            type="text"
            value={data.city || ''}
            onChange={(e) => onChange('city', e.target.value)}
            className="w-full border rounded-lg px-3 py-2"
          />
        </div>
        <div>
          <label className="block text-sm font-medium mb-1">รหัสไปรษณีย์</label>
          <input
            type="text"
            value={data.postal || ''}
            onChange={(e) => onChange('postal', e.target.value)}
            className="w-full border rounded-lg px-3 py-2"
          />
        </div>
      </div>
      <div>
        <label className="block text-sm font-medium mb-1">ประเทศ</label>
        <select
          value={data.country || 'Thailand'}
          onChange={(e) => onChange('country', e.target.value)}
          className="w-full border rounded-lg px-3 py-2"
        >
          <option value="Thailand">Thailand</option>
          <option value="Cambodia">Cambodia</option>
          <option value="Laos">Laos</option>
          <option value="Myanmar">Myanmar</option>
          <option value="Malaysia">Malaysia</option>
          <option value="Singapore">Singapore</option>
        </select>
      </div>
    </div>
  );
}