'use client';

import * as React from 'react';
import { FormState } from '../types';
import { Checkbox } from '../components/Checkbox';
import { RepeatableList } from '../components/RepeatableList';
import { FEATURE_OPTIONS } from '../constants';

interface FeaturesStepProps {
  state: FormState;
  updateState: (updates: Partial<FormState>) => void;
  toggleItem: (list: string[], id: string) => string[];
}

export function FeaturesStep({ state, updateState, toggleItem }: FeaturesStepProps) {
  return (
    <div className="space-y-12">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {FEATURE_OPTIONS.map(opt => (
          <Checkbox 
            key={opt.id} label={opt.label} desc={opt.desc} 
            checked={state.features.includes(opt.id)} 
            onChange={() => updateState({ features: toggleItem(state.features, opt.id) })} 
          />
        ))}
      </div>
      <div className="space-y-6">
        <p className="text-lg font-bold text-slate-900">Weitere inhaltliche Module?</p>
        <RepeatableList
          items={state.otherFeatures}
          onAdd={(v) => updateState({ otherFeatures: [...state.otherFeatures, v] })}
          onRemove={(i) => updateState({ otherFeatures: state.otherFeatures.filter((_, idx) => idx !== i) })}
          placeholder="z.B. Glossar, Download-Center, Partner-Bereich..."
        />
      </div>
    </div>
  );
}