import styled from 'styled-components';
import React from 'react';
import DateLegend from './DateLegend';

const SELECTED_DATE_COLOR = `linear-gradient(137deg, #55f5df 0%, #55d0f5 100%)`;
const TODAYS_DATE_COLOR = `#6396E5`;

function DateLegends(props: any) {
  return (
    <Container className={props.className}>
      <DateLegend label="Selected date" color={SELECTED_DATE_COLOR} />
      <DateLegend label="Today's date" color={TODAYS_DATE_COLOR} />
    </Container>
  );
}

const Container = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
`;

export default styled(DateLegends)``;
