import styled, { css } from 'styled-components';

const Wrapper = styled.div<{
  themeSize: 'small' | 'medium';
}>`
  box-sizing: border-box;
  color: ${({ theme }) => theme.colors.progress.text};
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0;
  svg {
    overflow: initial;
  }

  ${({ themeSize, theme }) => {
    switch (themeSize) {
      case 'small':
        return css`
          width: ${theme.sizes.progress.circleSmall};
          height: ${theme.sizes.progress.circleSmall};
          font-size: ${theme.fontSizes.progress.circleSmall};
        `;
      case 'medium':
        return css`
          width: ${theme.sizes.progress.circleMedium};
          height: ${theme.sizes.progress.circleMedium};
          font-size: ${theme.fontSizes.progress.circleMedium};
        `;
    }
  }};
`;

const Info = styled.div`
  display: flex;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
`;

export { Wrapper, Info };