import { FormSection } from '@admin/components/ui/forms/form-section';
import { FileUploadInput } from '@admin/components/ui/forms/file-upload-input';

type AboutImageFieldsProps = {
    data: {
        about_image: string;
    };
    errors: Partial<Record<'about_image', string>>;
    setData: (key: string, value: unknown) => void;
};

export function AboutImageFields({ data, errors, setData }: AboutImageFieldsProps) {
    return (
        <FormSection title="About us image">
            <FileUploadInput
                label="About us image (696×485 px recommended)"
                inputId="about-us-image"
                uploadUrl="/admin/api/about/upload_about_image"
                accept="image/jpeg,image/png,image/jpg,image/webp"
                previewUrl={data.about_image ? `/storage/${data.about_image}` : ''}
                previewType="image"
                error={errors.about_image}
                onSuccess={(filename) => setData('about_image', filename)}
            />
        </FormSection>
    );
}