"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Footer = exports.Description = exports.Title = exports.InnerContainer = exports.Wrapper = void 0;
const styled_1 = require("../../styled");
const Typography_1 = require("../../Typography");
const constants_1 = require("./constants");
const shouldForwardProp = (propName) => {
    return propName !== '$size';
};
exports.Wrapper = (0, styled_1.styled)('div', {
    shouldForwardProp,
}) `
  display: flex;
  flex-direction: column;
  gap: ${({ theme, $size }) => $size === constants_1.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)};
  }
`;
exports.InnerContainer = (0, styled_1.styled)('div', {
    shouldForwardProp,
}) `
  max-width: ${({ $size }) => constants_1.MAX_INNER_WIDTH[$size]};
  margin: 0 auto;
`;
exports.Title = (0, styled_1.styled)(Typography_1.Typography, {
    shouldForwardProp,
}) `
  margin-bottom: ${({ theme, $size }) => $size === constants_1.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};
  }
`;
exports.Description = (0, styled_1.styled)(Typography_1.Typography, {
    shouldForwardProp,
}) `
  display: block;

  font-size: ${({ $size, theme }) => $size === constants_1.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};
  }
`;
exports.Footer = styled_1.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;
  }
`;
