import styled, { css } from 'styled-components';
import { UI_BREAKPOINT_MOBILE } from '../../constants/uiBreakpoints';

interface IScalableContainerProps {
  scale?: number;
  centralize?: boolean;
  breakPoint?: string;
}

export const ScalableContainer = styled.div<IScalableContainerProps>`
  ${({ centralize = true }) =>
    centralize &&
    css`
      display: flex;
      justify-content: center;
      align-items: center;
    `}

  @media (max-width: ${({ breakPoint }) => breakPoint ?? UI_BREAKPOINT_MOBILE}) {
    transform: scale(${({ scale }) => scale ?? 0.75});
  }
`;