import styled from 'styled-components';
import { getSpacing, getFontSize, getColorAlias, convertToTransientProps } from '../../../../utils/index.js';

const Wrapper = styled.div `
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: ${getSpacing('s04', 's05')};

  font-weight: ${(props) => props.theme.font.weightExtrabold};
  ${getFontSize('size16')};
  color: ${getColorAlias('contentDefault')};
`;
const MonthYear = styled.h2.withConfig({
    shouldForwardProp: convertToTransientProps(['isLeft']),
}) `
  justify-content: center;
  align-items: center;
  ${getFontSize('size16')};
  margin-left: ${({ isLeft }) => (isLeft ? '45px' : 0)};
  margin-right: ${(isLeft) => (isLeft ? 0 : '30px')};
`;
const ButtonsWrapper = styled.div `
  display: flex;
  align-items: center;
`;
const RangeButtonsWrapper = styled.div `
  display: flex;
  grid-template-columns: 50% 50%;
  align-items: center;
`;

export { ButtonsWrapper, MonthYear, RangeButtonsWrapper, Wrapper };
