import React from 'react'
import { DatePicker } from 'antd'
import { useLocation, useNavigate } from 'react-router-dom';
import { useOrderFillterState } from '../../../zustand/OrderFillter';
import { useTranslation } from 'react-i18next';
const { RangePicker } = DatePicker;

const CustomDateRange = () => {
    const dateFormat = 'YYYY-MM-DD';
    const { toDate,fromDate,setFromDate,setToDate } = useOrderFillterState(); // Moved hook call inside the functional component
    const [t] = useTranslation();

    const onCalendarChange = (value: any) => {
            const FromData = value[0]?.format(dateFormat) 
            const ToData = value[1]?.format(dateFormat) 

            setFromDate(FromData)
            setToDate(ToData)

    };
    return (
            <RangePicker
                size="large"
                allowClear
                format={dateFormat}
                onChange={onCalendarChange}
                className="CustomDateRange"
                placeholder={[t(`DateFrom`),t(`DateTo`)]}
            />
    )
}

export default CustomDateRange