import styled from 'styled-components';
import React from 'react';
import Seperator from './Seperator';
import { FromDate, TillDate } from './RangeDates';

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

function RangeDateFilter({
  setStartDate,
  setEndDate,
  startDate,
  endDate,
}: Props) {
  return (
    <Container>
      <FromDate
        startDate={startDate}
        setFrom={setStartDate}
        setEnd={setEndDate}
      />
      <Seperator />
      <TillDate
        startDate={startDate}
        setFrom={setStartDate}
        endDate={endDate}
        setTill={setEndDate}
      />
    </Container>
  );
}

const Container = styled.div`
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 0px;
  align-items: center;
  ${Seperator} {
    // transform: translateX(-50%);
  }
`;
export default RangeDateFilter;
