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

export type BackgroundImagesFormData = {
    statistics_background_image: string;
    breadcrumb_background_image: string;
};

type BackgroundImagesFormFieldsProps = {
    data: BackgroundImagesFormData;
    errors: Partial<Record<keyof BackgroundImagesFormData, string>>;
    setData: (key: string, value: unknown) => void;
};

export function BackgroundImagesFormFields({ data, errors, setData }: BackgroundImagesFormFieldsProps) {
    return (
        <>
            <FormSection title="Statistics band">
                <FileUploadInput
                    label="Statistics background image (1920×600 px recommended)"
                    inputId="statistics-background-image"
                    uploadUrl="/admin/api/sections/background-images/upload_statistics_background_image"
                    accept="image/jpeg,image/png,image/jpg,image/webp"
                    previewUrl={data.statistics_background_image ? `/storage/${data.statistics_background_image}` : ''}
                    previewType="image"
                    error={errors.statistics_background_image}
                    onSuccess={(filename) => setData('statistics_background_image', filename)}
                />
            </FormSection>

            <FormSection title="Page breadcrumbs">
                <FileUploadInput
                    label="Breadcrumb background image (1920×450 px recommended)"
                    inputId="breadcrumb-background-image"
                    uploadUrl="/admin/api/sections/background-images/upload_breadcrumb_background_image"
                    accept="image/jpeg,image/png,image/jpg,image/webp"
                    previewUrl={data.breadcrumb_background_image ? `/storage/${data.breadcrumb_background_image}` : ''}
                    previewType="image"
                    error={errors.breadcrumb_background_image}
                    onSuccess={(filename) => setData('breadcrumb_background_image', filename)}
                />
            </FormSection>
        </>
    );
}