import { type FC } from 'react'
import { Checkbox } from '@/components/ui/checkbox'
import UploadBoxDraggble from '@/components/UploadBoxDraggble'
import SwitchComponent from '@/components/Switch'

type Props = {
    isActive: boolean
    isSpecial: boolean
    onChangeActive: (value: boolean) => void
    onChangeSpecial: (value: boolean) => void
    onChangeImages: (files: File[]) => void
    existingImages?: string[]
    onChangeExistingImages?: (images: string[]) => void
}

const CreateFoodSidebar: FC<Props> = (props: Props) => {
    return (
        <div className='bg-white w-[300px] text-xs h-fit px-5 py-7 rounded-3xl'>

            <div>
                <div className='flex items-center justify-between'>
                    <div>وضعیت سرویس</div>
                    <SwitchComponent
                        active
                        onChange={(value) => props.onChangeActive(value)}
                    />
                </div>
            </div>

            <div className='mt-6'>
                <div className='flex items-start gap-2'>
                    <Checkbox
                        checked={props.isSpecial}
                        onCheckedChange={(checked) => props.onChangeSpecial(checked as boolean)}
                    />
                    <label className='text-xs leading-tight cursor-pointer'>
                        این غذا پیشنهاد ویژه رستوران هست.
                    </label>
                </div>
            </div>

            <div className='mt-8'>
                <div className='text-sm mb-2'>تصاویر غذا</div>
                <UploadBoxDraggble
                    label='تصویر غذا را آپلود کنید'
                    isMultiple={true}
                    onChange={(files: File[]) => props.onChangeImages(files)}
                    preview={props.existingImages}
                    onChangePreview={props.onChangeExistingImages}
                    imageSize='medium'
                />
            </div>
        </div>
    )
}

export default CreateFoodSidebar