export function TextField({
  name,
  label,
  defaultValue,
  required,
  type = 'text'
}: {
  name: string;
  label: string;
  defaultValue?: string | number;
  required?: boolean;
  type?: string;
}) {
  return (
    <div>
      <label htmlFor={name} className="mb-1 block text-sm font-medium">
        {label}
      </label>
      <input
        id={name}
        name={name}
        type={type}
        defaultValue={defaultValue}
        required={required}
        className="w-full rounded-lg border border-graphite-800/20 px-3 py-2 text-sm"
      />
    </div>
  );
}

export function TextAreaField({
  name,
  label,
  defaultValue,
  required,
  rows = 4
}: {
  name: string;
  label: string;
  defaultValue?: string;
  required?: boolean;
  rows?: number;
}) {
  return (
    <div>
      <label htmlFor={name} className="mb-1 block text-sm font-medium">
        {label}
      </label>
      <textarea
        id={name}
        name={name}
        defaultValue={defaultValue}
        required={required}
        rows={rows}
        className="w-full rounded-lg border border-graphite-800/20 px-3 py-2 text-sm"
      />
    </div>
  );
}

export function CheckboxField({
  name,
  label,
  defaultChecked
}: {
  name: string;
  label: string;
  defaultChecked?: boolean;
}) {
  return (
    <label className="flex items-center gap-2 text-sm font-medium">
      <input type="checkbox" name={name} defaultChecked={defaultChecked} className="h-4 w-4 rounded" />
      {label}
    </label>
  );
}

export function SelectField({
  name,
  label,
  defaultValue,
  options,
  required
}: {
  name: string;
  label: string;
  defaultValue?: string;
  options: { value: string; label: string }[];
  required?: boolean;
}) {
  return (
    <div>
      <label htmlFor={name} className="mb-1 block text-sm font-medium">
        {label}
      </label>
      <select
        id={name}
        name={name}
        defaultValue={defaultValue}
        required={required}
        className="w-full rounded-lg border border-graphite-800/20 bg-white px-3 py-2 text-sm"
      >
        <option value="" disabled>
          —
        </option>
        {options.map((o) => (
          <option key={o.value} value={o.value}>
            {o.label}
          </option>
        ))}
      </select>
    </div>
  );
}

export function FieldsetLocale({ locale, children }: { locale: 'fr' | 'ar'; children: React.ReactNode }) {
  return (
    <fieldset className="rounded-xl border border-graphite-800/10 p-4">
      <legend className="px-1 text-xs font-semibold uppercase tracking-wide text-graphite-900/50">
        {locale === 'fr' ? 'Français' : 'العربية'}
      </legend>
      <div className="space-y-3">{children}</div>
    </fieldset>
  );
}