'use client';

import { FormField } from '@/components/ui/primitives/FormField';
import { Input } from '@/components/ui/primitives/Input';
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('title_he')}>
        <Input
          dir="rtl"
          value={config.title.he}
          onChange={(e) => onChange({ ...config, title: { ...config.title, he: e.target.value } })}
        />
      </FormField>
      <FormField label={t('title_en')}>
        <Input
          value={config.title.en}
          onChange={(e) => onChange({ ...config, title: { ...config.title, en: e.target.value } })}
        />
      </FormField>
      <FormField label={t('hero_subtitle_he')}>
        <Input
          dir="rtl"
          value={config.subtitle.he}
          onChange={(e) =>
            onChange({ ...config, subtitle: { ...config.subtitle, he: e.target.value } })
          }
        />
      </FormField>
      <FormField label={t('hero_subtitle_en')}>
        <Input
          value={config.subtitle.en}
          onChange={(e) =>
            onChange({ ...config, subtitle: { ...config.subtitle, en: e.target.value } })
          }
        />
      </FormField>
      <FormField label={t('hero_bg_image')}>
        <Input
          value={config.bgImage ?? ''}
          placeholder="https://"
          onChange={(e) => onChange({ ...config, bgImage: e.target.value || undefined })}
        />
      </FormField>
    </div>
  );
}