import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import { grayColor } from 'Themes/utils/colorPickers';
import { textSize } from 'Themes/utils/fontPickers';
import { screenSize } from 'Themes/utils/mediaQueries';
import { BaseCardItem } from '../cardItem';

const DateContainer = styled.div`
  display: flex;

  @media ${screenSize('desktop')} {
    flex-direction: column;
  }
`;

const Title = styled.span`
  display: block;
  color: ${grayColor};
  font-size: ${textSize('S')};
  margin-bottom: 4px;
  margin-right: 8px;
`;

const Date = styled.span`
  display: block;
  margin-bottom: 8px;
  font-size: ${textSize('M')};
`;

const StyledEffectivePeriod = styled(BaseCardItem)``;

const EffectivePeriodContainer = styled.div`
  display: flex;
  justify-content: space-between;

  @media ${screenSize('desktop')} {
    flex-direction: column;
  }
`;

const EffectivePeriodItem = ({ value, ...props }) => {
  const { startDate, endDate } = value;
  return (
    <StyledEffectivePeriod
      {...props}
      value={
        <EffectivePeriodContainer>
          <DateContainer>
            <Title>From:</Title>
            <Date>{startDate}</Date>
          </DateContainer>
          <DateContainer>
            <Title>To:</Title>
            <Date>{endDate}</Date>
          </DateContainer>
        </EffectivePeriodContainer>
      }
    />
  );
};

EffectivePeriodItem.propTypes = {
  value: PropTypes.shape({
    startDate: PropTypes.string.isRequired,
    endDate: PropTypes.string.isRequired,
  }).isRequired,
};

EffectivePeriodItem.displayName = 'EffectivePeriodItem';

export default EffectivePeriodItem;
