'use client';

import { useT } from '@/lib/i18n/react';
import { FormField } from '@/components/ui/primitives/FormField';
import { Input } from '@/components/ui/primitives/Input';
import type { Config } from './config';

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

/**
 * ConfigEditor for club-stories module.
 * Admin can set optional localized title and the empty-state label.
 */
export function ConfigEditor({ config, onChange }: Props) {
  const t = useT('club_stories');

  return (
    <div className="flex flex-col gap-4">
      <FormField label={t('title_he_label')} htmlFor="ls-title-he">
        <Input
          id="ls-title-he"
          value={config.title?.he ?? ''}
          onChange={(e) =>
            onChange({
              ...config,
              title: { he: e.target.value, en: config.title?.en ?? '' },
            })
          }
          dir="rtl"
        />
      </FormField>

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

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

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