'use client';

import { FormField } from '@/components/ui/primitives/FormField';
import { Input } from '@/components/ui/primitives/Input';
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from '@/components/ui/primitives/Select';
import { useT } from '@/lib/i18n/react';
import type { Config } from './config';

export function ConfigEditor({
  config,
  onChange,
}: {
  config: Config;
  onChange: (c: Config) => void;
}) {
  const t = useT('page_organizer');

  return (
    <div className="flex flex-col gap-4">
      <FormField label={t('banner_image')}>
        <Input
          value={config.imageUrl}
          placeholder="https://"
          onChange={(e) => onChange({ ...config, imageUrl: e.target.value })}
        />
      </FormField>

      <FormField label={t('banner_alt_he')}>
        <Input
          dir="rtl"
          value={config.alt.he}
          onChange={(e) => onChange({ ...config, alt: { ...config.alt, he: e.target.value } })}
        />
      </FormField>

      <FormField label={t('banner_alt_en')}>
        <Input
          value={config.alt.en}
          onChange={(e) => onChange({ ...config, alt: { ...config.alt, en: e.target.value } })}
        />
      </FormField>

      <FormField label={t('banner_href')}>
        <Input
          value={config.href}
          placeholder="https://"
          onChange={(e) => onChange({ ...config, href: e.target.value })}
        />
      </FormField>

      <FormField label={t('aspect')}>
        <Select
          value={config.aspect}
          onValueChange={(v) => onChange({ ...config, aspect: v as Config['aspect'] })}
        >
          <SelectTrigger>
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="16:9">16:9</SelectItem>
            <SelectItem value="21:9">21:9</SelectItem>
          </SelectContent>
        </Select>
      </FormField>

      <FormField label={t('mode')}>
        <Select
          value={config.mode}
          onValueChange={(v) => onChange({ ...config, mode: v as Config['mode'] })}
        >
          <SelectTrigger>
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="featured">{t('mode_featured')}</SelectItem>
            <SelectItem value="pinned">{t('mode_pinned')}</SelectItem>
          </SelectContent>
        </Select>
      </FormField>
    </div>
  );
}