import ReactDatePicker from 'antd/es/date-picker';
import { styled, useTheme } from '@mui/material';
import 'antd/es/date-picker/style/index';
import { useTranslation } from 'react-i18next';
interface DatePickerProps {
  value?: Date | null;
  onChange?: (date: Date | null) => void;
  className?: string;
}

export const DatePickerCom = ({ value, onChange, className }: DatePickerProps) => {
  const { t } = useTranslation();
  const theme = useTheme();
  const primaryColor = theme.palette.primary.main;
  return (
    <div className={className}>
      <ReactDatePicker
        placement='topLeft'
        placeholder={t('Select Date')}
        value={value}
        showNow={false}
        // showTime={true}
        onChange={(date) => onChange?.(date)} //
        style={{
          color: primaryColor,
        }}
        popupStyle={{ zIndex: 2000 }}
      />
    </div>
  );
};

export const DatePicker = styled(DatePickerCom)(({ theme }) => ({
  '& .ant-picker-input': {
    color: 'var(--color-primary)',
    '& .ant-picker-suffix, .ant-picker-clear': {
      color: 'var(--color-primary)',
    },
  },
}));
