'use client';

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

export function ConfigEditor({
  config,
  onChange,
}: {
  config: Config;
  onChange: (c: Config) => void;
}) {
  const t = useT('page_organizer');

  return (
    <BasicRowConfigEditor
      config={config}
      onChange={onChange}
      extra={
        <FormField label={t('speed_seconds')} tooltip={t('help_speed_seconds')}>
          <Input
            type="number"
            min={30}
            max={300}
            value={config.speedSeconds}
            onChange={(e) => onChange({ ...config, speedSeconds: Number(e.target.value) || 135 })}
          />
        </FormField>
      }
    />
  );
}