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

export function ConfigEditor({
  config,
  onChange,
}: {
  config: Config;
  onChange: (c: Config) => void;
}) {
  const t = useT('ticker-strip');
  return (
    <div className="flex flex-col gap-4">
      <FormField label={t('config_limit')} htmlFor="ticker-limit">
        <Input
          id="ticker-limit"
          type="number"
          min={5}
          max={30}
          value={config.limit}
          onChange={(e) => onChange({ ...config, limit: Number(e.target.value) })}
        />
      </FormField>
      <FormField label={t('config_window_hours')} htmlFor="ticker-window">
        <Input
          id="ticker-window"
          type="number"
          min={1}
          max={24}
          value={config.windowHours}
          onChange={(e) => onChange({ ...config, windowHours: Number(e.target.value) })}
        />
      </FormField>
    </div>
  );
}