import {Col, DatePicker, Row} 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 (
    <Col span={6}>
      <Row>
        <Col>
          <label htmlFor={`date_filter_${name}`} className={css.fieldLabel}>{label}: </label>
        </Col>
        <Col span={16}>
          <DatePicker.RangePicker
            data-testid={`date_filter_${name}`}
            name={name}
            value={value}
            onChange={onChange}
          />
        </Col>
      </Row>
    </Col>
  );
};

export default FilterTime;
