import React from 'react';
import { DatePicker } from 'antd';
import type { DatePickerProps, RangePickerProps } from 'antd/es/date-picker';

const { RangePicker } = DatePicker;

interface DynamicDatePickerProps {
    type: 'datePicker' | 'rangePicker'
    showTime?: boolean
    format?: string
    onChange: (
        value: DatePickerProps['value'] | RangePickerProps['value'],
        dateString: [string, string] | string
    ) => void
    onOk: (value: DatePickerProps['value'] | RangePickerProps['value']) => void
}

const DynamicDatePicker: React.FC<DynamicDatePickerProps> = ({
  type,
  showTime,
  format,
  onChange,
  onOk,
}) => {
  if (type === 'datePicker') {
    return (
      <DatePicker
        showTime={showTime}
        format={format}
        style={{ width: '100%' }}
        onChange={onChange}
        onOk={onOk}
      />
    );
  } else if (type === 'rangePicker') {
    return (
      <RangePicker
        showTime={{ format: 'HH:mm' }}
        format={format}
        onChange={onChange}
        onOk={onOk}
      />
    );
  }

  return null;
};

export default DynamicDatePicker;