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

type StatisticIntent = 'text' | 'white' | 'inherit';

export const StatisticContainer = styled.div<{
  themeAlign: 'left' | 'right';
}>`
  padding: 0;
  margin: 0;
  width: 100%;
  ${({ themeAlign }) => {
    switch (themeAlign) {
      case 'left':
        return css`
          text-align: left;
        `;
      case 'right':
        return css`
          text-align: right;
        `;
    }
  }};
`;

export const StyledTitleWrapper = styled.div<{
  themeIntent: StatisticIntent;
}>`
  padding: 0;
  margin: ${({ theme }) => theme.space.statistic.titleWrapperMargin};
  font-size: ${({ theme }) => theme.fontSizes.statistic.title};
  line-height: ${({ theme }) => theme.lineHeights.statistic.default};
  ${({ themeIntent, theme }) => {
    switch (themeIntent) {
      case 'text':
        return css`
          color: ${theme.colors.statistic.titleText};
        `;
      case 'white':
        return css`
          color: ${theme.colors.statistic.titleWhite};
        `;
      case 'inherit':
        return css`
          color: inherit;
        `;
    }
  }};
`;

export const StyledContentWrapper = styled.div`
  padding: 0;
  margin: 0;
`;

export const StyledValueWrapper = styled.span<{
  themeIntent: StatisticIntent;
}>`
  padding: 0;
  margin: 0;
  font-size: ${({ theme }) => theme.fontSizes.statistic.content};
  font-weight: ${({ theme }) => theme.fontWeights.statistic.content};
  ${({ themeIntent, theme }) => {
    switch (themeIntent) {
      case 'text':
        return css`
          color: ${theme.colors.statistic.contentText};
        `;
      case 'white':
        return css`
          color: ${theme.colors.statistic.contentWhite};
        `;
      case 'inherit':
        return css`
          color: inherit;
        `;
    }
  }};
`;

export const StyledPrefixWrapper = styled.span<{
  themeIntent: StatisticIntent;
}>`
  padding: 0;
  margin: ${({ theme }) => theme.space.statistic.prefixWrapperMargin};

  ${({ themeIntent, theme }) => {
    switch (themeIntent) {
      case 'text':
        return css`
          color: ${theme.colors.statistic.contentText};
        `;
      case 'white':
        return css`
          color: ${theme.colors.statistic.contentWhite};
        `;
      case 'inherit':
        return css`
          color: inherit;
        `;
    }
  }};
`;

export const StyledSuffixWrapper = styled.span<{
  themeIntent: StatisticIntent;
}>`
  padding: 0;
  margin: ${({ theme }) => theme.space.statistic.suffixWrapperMargin};
  ${({ themeIntent, theme }) => {
    switch (themeIntent) {
      case 'text':
        return css`
          color: ${theme.colors.statistic.contentText};
        `;
      case 'white':
        return css`
          color: ${theme.colors.statistic.contentWhite};
        `;
      case 'inherit':
        return css`
          color: inherit;
        `;
    }
  }};
`;