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;
        occasion_title: string;
        occasion_text: string;
        why_choose: string;
        core_values: string;
    };
    errors: Partial<Record<keyof AboutContentFieldsProps['data'], string>>;
    setData: (key: string, value: unknown) => void;
};

export function AboutContentFields({ data, errors, setData }: AboutContentFieldsProps) {
    return (
        <>
            <FormSection title="Introduction">
                <FormGroup
                    label="Eyebrow"
                    helpText="Small label above the about heading."
                    error={errors.motto}
                    inputProps={{
                        value: data.motto,
                        onChange: (event) => setData('motto', event.target.value),
                    }}
                />

                <FormGroup
                    label="Heading"
                    helpText="Main heading beside the about photos."
                    error={errors.intro}
                    inputProps={{
                        value: data.intro,
                        onChange: (event) => setData('intro', event.target.value),
                    }}
                />

                <FormGroup
                    as="textarea"
                    label="Introduction"
                    helpText="Shown under the heading. Use a blank line between paragraphs."
                    error={errors.about_text}
                    inputProps={{
                        value: data.about_text,
                        rows: 12,
                        onChange: (event) => setData('about_text', event.target.value),
                    }}
                />
            </FormSection>

            <FormSection title="Vision and mission">
                <FormGroup
                    as="textarea"
                    label="Our vision"
                    helpText="Shown with the first feature icon beside the introduction."
                    error={errors.vision}
                    inputProps={{
                        value: data.vision,
                        rows: 4,
                        onChange: (event) => setData('vision', event.target.value),
                    }}
                />

                <FormGroup
                    as="textarea"
                    label="Our mission"
                    helpText="Shown with the second feature icon beside the introduction."
                    error={errors.mission}
                    inputProps={{
                        value: data.mission,
                        rows: 4,
                        onChange: (event) => setData('mission', event.target.value),
                    }}
                />
            </FormSection>

            <FormSection title="Why choose us">
                <FormGroup
                    as="textarea"
                    label="Reasons"
                    helpText="One reason per block. First line is the title, the next line is the description. Separate reasons with a blank line."
                    error={errors.why_choose}
                    inputProps={{
                        value: data.why_choose,
                        rows: 14,
                        onChange: (event) => setData('why_choose', event.target.value),
                    }}
                />

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

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

            <FormSection title="Core values">
                <FormGroup
                    as="textarea"
                    label="Values"
                    helpText="One value per block. First line is the title, the next line is the description. Separate values with a blank line."
                    error={errors.core_values}
                    inputProps={{
                        value: data.core_values,
                        rows: 12,
                        onChange: (event) => setData('core_values', event.target.value),
                    }}
                />
            </FormSection>
        </>
    );
}