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

type AboutContentFieldsProps = {
    data: {
        mission: string;
        vision: string;
        motto: string;
        intro: string;
        about_text: string;
        objectives: string;
    };
    errors: Partial<Record<'mission' | 'vision' | 'motto' | 'intro' | 'about_text' | 'objectives', string>>;
    setData: (key: string, value: unknown) => void;
};

export function AboutContentFields({ data, errors, setData }: AboutContentFieldsProps) {
    return (
        <FormSection title="About content">
            <FormGroup
                as="textarea"
                label="Mission"
                error={errors.mission}
                inputProps={{
                    value: data.mission,
                    rows: 4,
                    onChange: (event) => setData('mission', event.target.value),
                }}
            />

            <FormGroup
                as="textarea"
                label="Vision"
                error={errors.vision}
                inputProps={{
                    value: data.vision,
                    rows: 4,
                    onChange: (event) => setData('vision', event.target.value),
                }}
            />

            <FormGroup
                label="Motto"
                error={errors.motto}
                inputProps={{
                    value: data.motto,
                    onChange: (event) => setData('motto', event.target.value),
                }}
            />

            <FormGroup
                label="About page title"
                helpText="Main heading on the public about page."
                error={errors.intro}
                inputProps={{
                    value: data.intro,
                    onChange: (event) => setData('intro', event.target.value),
                }}
            />

            <FormGroup
                as="textarea"
                label="Who we are"
                helpText="Shown in the Who we are section. Use blank lines between paragraphs."
                error={errors.about_text}
                inputProps={{
                    value: data.about_text,
                    rows: 10,
                    onChange: (event) => setData('about_text', event.target.value),
                }}
            />

            <FormGroup
                as="textarea"
                label="Our objectives"
                helpText="One objective per line for the Our Objectives list."
                error={errors.objectives}
                inputProps={{
                    value: data.objectives,
                    rows: 6,
                    onChange: (event) => setData('objectives', event.target.value),
                }}
            />
        </FormSection>
    );
}