import {DatePicker} from 'antd';
import {FC} from 'react';
import css from './index.module.css';
import type {Dayjs} from 'dayjs';

type EventValue<DateType> = DateType | null;
export type RangeValue<DateType> =
  | [EventValue<DateType>, EventValue<DateType>]
  | null;

type Props = {
  label: string;
  value: RangeValue<Dayjs>;
  name: string;
  onChange: (dates: RangeValue<Dayjs>) => void;
};

const FilterTime: FC<Props> = function ({label, name, value, onChange}) {
  return (
    <div className={css.field}>
      <label htmlFor={`date_filter_${name}`} className={css.fieldLabel}>
        {label}
      </label>
      <div className={css.fieldWrapper}>
        <DatePicker.RangePicker
          data-testid={`filter_${name}`}
          name={name}
          value={value}
          onChange={onChange}
          suffixIcon={null}
          className='width-full'
        />
      </div>
    </div>
  );
};

export default FilterTime;
