'use client';

/**
 * BasicRowConfigEditor - shared admin form for deal-row modules.
 *
 * Renders Hebrew title, English title, and item-limit inputs.
 * An optional `extra` slot allows individual modules to append additional
 * fields (e.g. the auto-scroll speed field or the category picker).
 *
 * All labels flow through `useT('page_organizer')`. Zero hardcoded values.
 * RTL-aware: Hebrew input carries `dir="rtl"`, English input inherits LTR from
 * its label context.
 */

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

export interface BasicRowConfigEditorProps<
  T extends { title: { he: string; en: string }; limit: number },
> {
  config: T;
  onChange: (c: T) => void;
  /** Optional slot for module-specific fields appended below the base fields. */
  extra?: ReactNode;
}

export function BasicRowConfigEditor<
  T extends { title: { he: string; en: string }; limit: number },
>({ config, onChange, extra }: BasicRowConfigEditorProps<T>) {
  const t = useT('page_organizer');

  return (
    <div className="flex flex-col gap-4">
      <FormField label={t('title_he')} tooltip={t('help_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')} tooltip={t('help_title_en')}>
        <Input
          value={config.title.en}
          onChange={(e) => onChange({ ...config, title: { ...config.title, en: e.target.value } })}
        />
      </FormField>

      <FormField label={t('limit')} tooltip={t('help_limit')}>
        <Input
          type="number"
          min={1}
          max={30}
          value={config.limit}
          onChange={(e) => onChange({ ...config, limit: Number(e.target.value) || 1 })}
        />
      </FormField>

      {extra}
    </div>
  );
}