import { styled } from '../../styled';
import { Typography } from '../../Typography';
import { MAX_INNER_WIDTH, SIZE } from './constants';
const shouldForwardProp = (propName) => {
    return propName !== '$size';
};
export const Wrapper = styled('div', {
    shouldForwardProp,
}) `
  display: flex;
  flex-direction: column;
  gap: ${({ theme, $size }) => $size === SIZE.Small ? theme.spacing(4) : theme.spacing(6)};
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;
  padding: ${({ theme }) => theme.spacing(4)};

  background-color: ${({ theme }) => theme.palette.background.paper};

  ${({ theme }) => theme.breakpoints.down('sm')} {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 1fr max-content;
    gap: ${({ theme }) => theme.spacing(4)};
  }
`;
export const InnerContainer = styled('div', {
    shouldForwardProp,
}) `
  max-width: ${({ $size }) => MAX_INNER_WIDTH[$size]};
  margin: 0 auto;
`;
export const Title = styled(Typography, {
    shouldForwardProp,
}) `
  margin-bottom: ${({ theme, $size }) => $size === SIZE.Small ? theme.spacing(2) : theme.spacing(4)};

  text-align: center;

  ${({ theme }) => theme.breakpoints.down('sm')} {
    margin-bottom: ${({ theme }) => theme.spacing(4)};

    font-size: ${({ theme }) => theme.typography.h4.fontSize};
    font-weight: ${({ theme }) => theme.typography.fontWeightMedium};
    line-height: ${({ theme }) => theme.typography.h4.lineHeight};
  }
`;
export const Description = styled(Typography, {
    shouldForwardProp,
}) `
  display: block;

  font-size: ${({ $size, theme }) => $size === SIZE.Large
    ? theme.typography.pxToRem(16)
    : theme.typography.body1.fontSize};
  text-align: center;

  ${({ theme }) => theme.breakpoints.down('sm')} {
    font-size: ${({ theme }) => theme.typography.body1.fontSize};
  }
`;
export const Footer = styled.footer `
  display: flex;
  flex-wrap: wrap;
  gap: calc(${({ theme }) => theme.spacing(3)});
  justify-content: center;

  color: ${({ theme }) => theme.palette.grey[900]};

  ${({ theme }) => theme.breakpoints.down('sm')} {
    flex-direction: column;
    gap: ${({ theme }) => theme.spacing(2)};

    margin-top: auto;
  }
`;
