'use client';

import { useT } from '@/lib/i18n/react';
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 type { Config } from './config';

interface Props {
  instanceId?: string;
  config: Config;
  onChange: (c: Config) => void;
}

/**
 * ConfigEditor for hero:static-page module.
 * Admin selects variant (constellation/manifesto), title he/en, subtitle he/en.
 */
export function ConfigEditor({ config, onChange }: Props) {
  const t = useT('hero_static_page');

  return (
    <div className="flex flex-col gap-4">
      <FormField label={t('variant_label')} htmlFor="hsp-variant">
        <Select
          value={config.variant}
          onValueChange={(v) => onChange({ ...config, variant: v as Config['variant'] })}
        >
          <SelectTrigger id="hsp-variant">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="constellation">{t('variant_constellation')}</SelectItem>
            <SelectItem value="manifesto">{t('variant_manifesto')}</SelectItem>
          </SelectContent>
        </Select>
      </FormField>

      <FormField label={t('title_he_label')} htmlFor="hsp-title-he">
        <Input
          id="hsp-title-he"
          value={config.title.he}
          onChange={(e) => onChange({ ...config, title: { ...config.title, he: e.target.value } })}
          dir="rtl"
        />
      </FormField>

      <FormField label={t('title_en_label')} htmlFor="hsp-title-en">
        <Input
          id="hsp-title-en"
          value={config.title.en}
          onChange={(e) => onChange({ ...config, title: { ...config.title, en: e.target.value } })}
          dir="ltr"
        />
      </FormField>

      <FormField label={t('subtitle_he_label')} htmlFor="hsp-subtitle-he">
        <Input
          id="hsp-subtitle-he"
          value={config.subtitle.he}
          onChange={(e) =>
            onChange({ ...config, subtitle: { ...config.subtitle, he: e.target.value } })
          }
          dir="rtl"
        />
      </FormField>

      <FormField label={t('subtitle_en_label')} htmlFor="hsp-subtitle-en">
        <Input
          id="hsp-subtitle-en"
          value={config.subtitle.en}
          onChange={(e) =>
            onChange({ ...config, subtitle: { ...config.subtitle, en: e.target.value } })
          }
          dir="ltr"
        />
      </FormField>
    </div>
  );
}