import { FC } from 'react';
import { Calendar2 } from 'iconsax-react';
import DatePicker from 'react-multi-date-picker';
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
import { getJalaaliDate } from '../../utility/getDate';

type Props = {
    field: any
}

export const DatepickerComponent: FC<Props> = ({ field }) => {
    return (
        <div className='relative w-full min-w-max cursor-pointer mb-10 xl:mb-0'>
            <div className="absolute top-[18.5px] left-5 grid h-5 w-5 place-items-center !z-50">
                <Calendar2 color='#777577' />
            </div>
            <DatePicker
                {...field}
                value={field.value}
                onChange={field.onChange}
                showOtherDays
                placeholder={getJalaaliDate()}
                calendar={persian}
                locale={persian_fa}
                calendarPosition="bottom-right"
                inputClass='w-full !min-w-full absolute input-style top-0 z-10 cursor-pointer'
            />
        </div>
    )
}