import { FormGroup } from '@admin/components/ui/forms/form-group';

export type ProcessStep = {
    heading: string;
    text: string;
};

type HomeProcessStepsFieldsProps = {
    steps: ProcessStep[];
    errors: Partial<Record<'process_steps' | `process_steps.${number}.heading` | `process_steps.${number}.text`, string>>;
    onChangeStep: (index: number, field: keyof ProcessStep, value: string) => void;
};

const stepLabels = ['Process 1', 'Process 2', 'Process 3'] as const;

export function HomeProcessStepsFields({ steps, errors, onChangeStep }: HomeProcessStepsFieldsProps) {
    return (
        <div className="mt-2">
            <p className="mb-4 text-sm font-semibold text-gray-700 dark:text-white">Process steps</p>

            {steps.map((step, index) => (
                <div
                    key={stepLabels[index]}
                    className={index < steps.length - 1 ? 'mb-6 border-b border-gray-200 pb-6 dark:border-white/10' : 'mb-2'}
                >
                    <p className="mb-4 text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-white/70">
                        {stepLabels[index]}
                    </p>

                    <FormGroup
                        label="Heading"
                        error={errors[`process_steps.${index}.heading` as keyof typeof errors] ?? (index === 0 ? errors.process_steps : undefined)}
                        inputProps={{
                            value: step.heading,
                            onChange: (event) => onChangeStep(index, 'heading', event.target.value),
                            required: true,
                        }}
                    />

                    <FormGroup
                        as="textarea"
                        label="Description"
                        error={errors[`process_steps.${index}.text` as keyof typeof errors]}
                        inputProps={{
                            value: step.text,
                            rows: 3,
                            onChange: (event) => onChangeStep(index, 'text', event.target.value),
                            required: true,
                        }}
                    />
                </div>
            ))}
        </div>
    );
}