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

const PaginationWrapper = styled.div`
  display: flex;
  margin: 0;
  padding: 0;
`;

const PageNumber = styled.button<{
  themeDisplayAs:
    | 'pageNumber'
    | 'activePage'
    | 'spreading'
    | 'disabled'
    | 'navigator';
}>`
  display: flex;
  align-items: center;
  justify-content: center;
  height: ${({ theme }) => theme.sizes.pagination.height};
  min-width: ${({ theme }) => theme.sizes.pagination.minWidth};
  margin: 0;
  padding: 0 ${({ theme }) => theme.space.pagination.leftRightPadding};
  font-size: ${({ theme }) => theme.fontSizes.pagination.default};
  font-weight: ${({ theme }) => theme.fontWeights.pagination.default};
  border-radius: ${({ theme }) => theme.radii.pagination.default};
  background: ${({ theme }) => theme.colors.pagination.background};
  color: ${({ theme }) => theme.colors.pagination.number};
  cursor: pointer;

  &:focus {
    outline: none;
  }

  ${({ themeDisplayAs, theme }) => {
    switch (themeDisplayAs) {
      case 'pageNumber':
        return css`
          border: none;
          &:hover {
            color: ${theme.colors.pagination.numberActive};
          }
        `;
      case 'activePage':
        return css`
          color: ${theme.colors.pagination.numberActive};
          border-width: ${theme.borderWidths.pagination.default};
          border-style: solid;
          border-color: ${theme.colors.pagination.numberActive};
        `;
      case 'spreading':
        return css`
          border: none;
          pointer-events: none;
        `;
      case 'disabled':
        return css`
          border: none;
          color: ${theme.colors.pagination.numberDisabled};
          pointer-events: none;
        `;
      case 'navigator':
        return css`
          border: none;
        `;
    }
  }};
`;

export { PaginationWrapper, PageNumber };