'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('markdown_he')}>
        <Input
          dir="rtl"
          value={config.body.he}
          onChange={(e) => onChange({ ...config, body: { ...config.body, he: e.target.value } })}
        />
      </FormField>

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

      <FormField label={t('background')}>
        <Select
          value={config.background}
          onValueChange={(v) => onChange({ ...config, background: v as Config['background'] })}
        >
          <SelectTrigger>
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="neutral">{t('background_neutral')}</SelectItem>
            <SelectItem value="brand">{t('background_brand')}</SelectItem>
            <SelectItem value="subtle">{t('background_subtle')}</SelectItem>
          </SelectContent>
        </Select>
      </FormField>
    </div>
  );
}