import * as React from 'react'
import styled from 'styled-components'

import { BottomSectionArrow } from './styledComponents'
import { Container } from './'

import type { SectionProps } from '../../types'

const StyledSection = styled.div<{ color?: string; bgColor?: string }>`
  position: relative;
  padding: 50px 0;
  color: ${(props) => props.color || 'white'};
  background-color: ${(props) => props.bgColor || '#314351'};
`

export const Section: React.FC<SectionProps> = ({
  children,
  bgColor,
  color,
  bottomArrow = true
}) => {
  return (
    <StyledSection bgColor={bgColor} color={color}>
      <Container>{children}</Container>
      {bottomArrow && <BottomSectionArrow />}
    </StyledSection>
  )
}