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

type AboutContactFieldsProps = {
    data: {
        facebook: string;
        x: string;
        instagram: string;
        linkedin: string;
        address: string;
        email: string;
        primary_phone: string;
        secondary_phone: string;
        whatsapp: string;
    };
    errors: Partial<
        Record<
            | 'facebook'
            | 'x'
            | 'instagram'
            | 'linkedin'
            | 'address'
            | 'email'
            | 'primary_phone'
            | 'secondary_phone'
            | 'whatsapp',
            string
        >
    >;
    setData: (key: string, value: unknown) => void;
};

export function AboutContactFields({ data, errors, setData }: AboutContactFieldsProps) {
    return (
        <FormSection title="Contact information">
            <FormGroup
                label="Facebook"
                error={errors.facebook}
                inputProps={{
                    type: 'url',
                    value: data.facebook,
                    placeholder: 'https://facebook.com/…',
                    onChange: (event) => setData('facebook', event.target.value),
                }}
            />

            <FormGroup
                label="X (Twitter)"
                error={errors.x}
                inputProps={{
                    type: 'url',
                    value: data.x,
                    placeholder: 'https://x.com/…',
                    onChange: (event) => setData('x', event.target.value),
                }}
            />

            <FormGroup
                label="Instagram"
                error={errors.instagram}
                inputProps={{
                    type: 'url',
                    value: data.instagram,
                    placeholder: 'https://instagram.com/…',
                    onChange: (event) => setData('instagram', event.target.value),
                }}
            />

            <FormGroup
                label="LinkedIn"
                error={errors.linkedin}
                inputProps={{
                    type: 'url',
                    value: data.linkedin,
                    placeholder: 'https://linkedin.com/company/…',
                    onChange: (event) => setData('linkedin', event.target.value),
                }}
            />

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

            <FormGroup
                label="Contact email"
                error={errors.email}
                inputProps={{
                    type: 'email',
                    value: data.email,
                    placeholder: 'info@example.com',
                    onChange: (event) => setData('email', event.target.value),
                }}
            />

            <FormGroup
                label="Primary phone number"
                error={errors.primary_phone}
                inputProps={{
                    type: 'tel',
                    value: data.primary_phone,
                    onChange: (event) => setData('primary_phone', event.target.value),
                }}
            />

            <FormGroup
                label="Secondary phone number"
                error={errors.secondary_phone}
                inputProps={{
                    type: 'tel',
                    value: data.secondary_phone,
                    onChange: (event) => setData('secondary_phone', event.target.value),
                }}
            />

            <FormGroup
                label="WhatsApp number"
                error={errors.whatsapp}
                inputProps={{
                    type: 'tel',
                    value: data.whatsapp,
                    onChange: (event) => setData('whatsapp', event.target.value),
                }}
            />
        </FormSection>
    );
}