'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;
}

export function ConfigEditor({ config, onChange }: Props) {
  const t = useT('merchant_scroll');

  return (
    <div className="flex flex-col gap-4">
      <FormField label={t('source_label')} htmlFor="ms-source">
        <Select
          value={config.source}
          onValueChange={(v) => onChange({ ...config, source: v as Config['source'] })}
        >
          <SelectTrigger id="ms-source">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="featured">{t('source_featured')}</SelectItem>
            <SelectItem value="subscribed-clubs">{t('source_subscribed_clubs')}</SelectItem>
            <SelectItem value="ids">{t('source_ids')}</SelectItem>
          </SelectContent>
        </Select>
      </FormField>

      <FormField label={t('limit_label')} htmlFor="ms-limit">
        <Input
          id="ms-limit"
          type="number"
          min={1}
          max={30}
          value={String(config.limit)}
          onChange={(e) =>
            onChange({ ...config, limit: Math.max(1, Math.min(30, Number(e.target.value))) })
          }
        />
      </FormField>
    </div>
  );
}