import { type FC } from 'react'
import type { FormikProps } from 'formik'
import UploadBox from '../../../components/UploadBox'

type SocialMediaLink = {
    id: string
    icon: string
    url: string
}

type FormValues = {
    siteLogo?: string
    footerPhone: string
    footerEmail: string
    footerAddress: string
    footerDescription: string
    shopPostalCode?: string
    downloadAppDetails: { id: string; pic: string; url: string }[]
    socialMediaLinks: SocialMediaLink[]
}

type Props = {
    formik: FormikProps<FormValues>
}

const FilesSection: FC<Props> = ({ formik }) => {
    return (
        <div className='w-80 space-y-6'>
            <div className='text-sm bg-white py-8 px-6 rounded-3xl'>
                <h2 className='text-lg font-medium mb-6'>فایل‌ها</h2>

                <div className='space-y-6'>
                    <div>
                        <label className="block text-sm font-medium mb-2">لوگو سایت</label>
                        <UploadBox
                            label=""
                            isMultiple={false}
                            onChange={(files) => {
                                if (files.length > 0) {
                                    formik.setFieldValue('siteLogo', URL.createObjectURL(files[0]))
                                }
                            }}
                        />
                        {formik.values.siteLogo && (
                            <img src={formik.values.siteLogo} alt="لوگو سایت" className="mt-2 w-20 h-20 object-contain rounded" />
                        )}
                    </div>

                    <div>
                        <label className="block text-sm font-medium mb-2">کد پستی فروشگاه</label>
                        <UploadBox
                            label=""
                            isMultiple={false}
                            onChange={(files) => {
                                if (files.length > 0) {
                                    formik.setFieldValue('shopPostalCode', URL.createObjectURL(files[0]))
                                }
                            }}
                        />
                        {formik.values.shopPostalCode && (
                            <img src={formik.values.shopPostalCode} alt="کد پستی فروشگاه" className="mt-2 w-20 h-20 object-contain rounded" />
                        )}
                    </div>
                </div>
            </div>
        </div>
    )
}

export default FilesSection
