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

export interface SectionProps extends GlobalProps {
  children: React.ReactNode;
  className?: string;
}

export const StyledSection = styled.div<SectionProps>`
  padding-top: 3rem;
  padding-bottom: 3rem;

  ${BreakpointMedia.sm} {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  ${BreakpointMedia.lg} {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
`;

export const Section = ({ children, ...props }: SectionProps) => <StyledSection {...props}>{children}</StyledSection>;