import React from 'react';
import styled from 'styled-components';
import { Gutters, Breakpoint } from '../../../tokens';
import type { GlobalProps } from '@lendi-ui/commons/utils';

const MaxWidths = {
  xxl: '82.5rem', // 1320px
  xl: '71.25rem', // 1140px
};

export interface WrapperProps extends GlobalProps {
  children: React.ReactNode;
  // Provides ability to extend this component with more max widths (eg smaller funnels flow width)
  /**
   * @default 'xxl'
   */
  maxWidth?: 'xl' | 'xxl';
  className?: string;
}

const StyledWrapper = styled.div<WrapperProps>`
  max-width: ${({ maxWidth }) => (maxWidth ? MaxWidths[maxWidth] : MaxWidths.xxl)};
  margin-left: auto;
  margin-right: auto;
  padding-left: ${Gutters.sm};
  padding-right: ${Gutters.sm};

  @media (min-width: ${Breakpoint.sm}) {
    padding-left: ${Gutters.md};
    padding-right: ${Gutters.md};
  }
`;

export const Wrapper = ({ children, ...props }: WrapperProps) => {
  return <StyledWrapper {...props}>{children}</StyledWrapper>;
};