import { type FC } from 'react'
import type { FormikProps } from 'formik'
import Input from '../../../components/Input'
import Textarea from '../../../components/Textarea'
import TextEditor from '../../../components/TextEditor'

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

type Props = {
    formik: FormikProps<FormValues>
    isDataLoaded: boolean
}

const MainInfoSection: FC<Props> = ({ formik, isDataLoaded }) => {
    return (
        <div className='flex-1 text-sm bg-white py-8 xl:px-10 px-6 rounded-3xl'>
            <h2 className='text-lg font-medium mb-6'>اطلاعات اصلی</h2>

            <div className='space-y-6'>
                <div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
                    <Input
                        label='تلفن فوتر'
                        placeholder='مثال: ۵۷۲۷ - ۹۴۵ - ۰۹۳۹'
                        {...formik.getFieldProps('footerPhone')}
                        error_text={isDataLoaded && formik.touched.footerPhone && formik.errors.footerPhone ? formik.errors.footerPhone : ''}
                    />
                    <Input
                        label='ایمیل فوتر'
                        placeholder='مثال: info@shinan.ir'
                        {...formik.getFieldProps('footerEmail')}
                        error_text={isDataLoaded && formik.touched.footerEmail && formik.errors.footerEmail ? formik.errors.footerEmail : ''}
                    />
                </div>

                <Textarea
                    label='آدرس فوتر'
                    placeholder='آدرس کامل را وارد کنید...'
                    {...formik.getFieldProps('footerAddress')}
                    error_text={isDataLoaded && formik.touched.footerAddress && formik.errors.footerAddress ? formik.errors.footerAddress : ''}
                />

                <div>
                    <label className="block text-sm font-medium mb-2">توضیحات فوتر</label>
                    <TextEditor
                        value={formik.values.footerDescription || ''}
                        onChange={(value) => formik.setFieldValue('footerDescription', value)}
                        height="h-32"
                    />
                </div>
            </div>
        </div>
    )
}

export default MainInfoSection