import styled from 'styled-components';
import React from 'react';
import { useEffect } from 'react';
import CustomDatePicker from '../CustomDatePicker';
import Header from '../header/Header';

type Props = {
  startDate: any;
  setStartDate: any;
  setEndDate: any;
};

function SingleDateFilter({ setStartDate, startDate, setEndDate }: Props) {
  useEffect(() => {
    setStartDate(startDate);
  }, []);

  const today = new Date();

  return (
    <Container>
      <Header {...{ startDate, setStartDate }} />
      <CustomDatePicker
        from={startDate}
        date={startDate}
        maxStartDate={today}
        type="from"
        onSelect={(newDate: any) => {
          setStartDate(newDate);
          setEndDate(undefined);
        }}
      />
    </Container>
  );
}

const Container = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
`;

export default styled(SingleDateFilter)``;
