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

const DaysOfWeek = styled.div.withConfig({
    shouldForwardProp: convertToTransientProps(['scrollBarWidth', 'narrow']),
}) `
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin: ${(props) => props.narrow ? getSpacing('s00') : getSpacing('s00', 's04')};
  overflow: hidden;
  padding-bottom: ${(props) => getSpacing(props.narrow ? 's02' : 's00')};
  border-bottom: ${(props) => props.narrow ? `1px solid ${getColorAlias('dividerDefault')}` : 'none'};
  padding-right: ${(props) => props.scrollBarWidth ? props.scrollBarWidth + 1 : 0}px;
`;
const DayName = styled.span `
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  ${getFontSize('size14')};
  font-weight: ${(props) => props.theme.font.weightRegular};
  color: ${getColorAlias('contentDisabled')};
  margin: ${getSpacing('s00', 's02')};
`;

export { DayName, DaysOfWeek };
