'use client';

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

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

export function AssetsStep({ state, updateState, toggleItem }: AssetsStepProps) {
  return (
    <div className="space-y-8">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {ASSET_OPTIONS.map(opt => (
          <Checkbox 
            key={opt.id} label={opt.label} desc={opt.desc} 
            checked={state.assets.includes(opt.id)} 
            onChange={() => updateState({ assets: toggleItem(state.assets, opt.id) })} 
          />
        ))}
      </div>
      <div className="space-y-4">
        <p className="text-sm font-bold text-slate-900">Weitere Materialien?</p>
        <RepeatableList 
          items={state.otherAssets} 
          onAdd={(v) => updateState({ otherAssets: [...state.otherAssets, v] })}
          onRemove={(i) => updateState({ otherAssets: state.otherAssets.filter((_, idx) => idx !== i) })}
          placeholder="z.B. Stock-Fotos, Video-Footage, Präsentationen..."
        />
      </div>
    </div>
  );
}