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

import { getBreakpointValue } from '../../utils/responsiveBreakpoints';

const EmptyWrapper = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
`;

const EmptyContentWrapper = styled.div<{ themeSize: 'small' | 'medium' }>`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: ${({ theme }) => theme.space.empty.wrapperPadding};

  min-width: ${({ theme }) => theme.sizes.empty.wrapperSmallMinWidth};
  max-width: ${({ theme }) => theme.sizes.empty.wrapperSmallMaxWidth};

  @media (min-width: ${getBreakpointValue('md')}px) {
    ${({ themeSize, theme }) => {
      switch (themeSize) {
        case 'small':
          return css`
            min-width: ${theme.sizes.empty.wrapperSmallMinWidth};
            max-width: ${theme.sizes.empty.wrapperSmallMaxWidth};
          `;
        case 'medium':
          return css`
            min-width: ${theme.sizes.empty.wrapperMediumMinWidth};
            max-width: ${theme.sizes.empty.wrapperMediumMaxWidth};
          `;
      }
    }};
  }
`;

const EmptyImg = styled.img`
  margin: 0;
  padding: 0;
`;

const EmptyTextWrapper = styled.div`
  display: flex;
  justify-content: center;
  text-align: center;
  color: ${({ theme }) => theme.colors.empty.text};
  font-size: ${({ theme }) => theme.fontSizes.empty.text};
  line-height: ${({ theme }) => theme.lineHeights.empty.text};
  margin: 0;
  padding: ${({ theme }) => theme.space.empty.textPadding};
`;

const EmptyExtraWrapper = styled.div`
  margin: 0;
  padding: 0;
  margin-top: ${({ theme }) => theme.space.empty.extraMarginTop};
`;

export {
  EmptyWrapper,
  EmptyContentWrapper,
  EmptyImg,
  EmptyTextWrapper,
  EmptyExtraWrapper,
};