import PropTypes from 'prop-types';
import styled from 'styled-components';
import Sprinkles01 from './svg/sprinkles-01.svg';
import Sprinkles02 from './svg/sprinkles-02.svg';
import Sprinkles03 from './svg/sprinkles-03.svg';

const Root = styled.div`
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 90px 0;
  overflow: hidden;

  @media (min-width: ${props => props.theme.breakpoints.medium}px) {
    padding: 120px 0;
  }

  ${props =>
    props.hasSprinkles &&
    `
    svg[class*='sprinkles'] {
      z-index: -1;
      position: absolute;
      width: 54px;
      pointer-events: none;

      &[class*='sprinkles-01'] {
        top: 10%;
        left: 15%;
      }

      &[class*='sprinkles-02'] {
        top: 52%;
        left: 4%;
        width: 47px;
      }

      &[class*='sprinkles-03'] {
        top: 50%;
        left: 90%;
      }
    }
  `};

  ${props =>
    props.hasGradient &&
    `
    &::before,
    &::after {
      content: '';
      z-index: -10;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
      opacity: 0.5;
      background: linear-gradient(140deg, rgb(250, 198, 161), rgb(169, 221, 215) 58%, rgb(175, 194, 231) 76%);
    }

    &::before {
      z-index: -1;
      top: 0;
      left: 0;
      right: 0;
      transform: none;
      width: 100%;
      height: 100%;
      opacity: 1;
      background: linear-gradient(180deg, rgba(255, 255, 255, 1) 25%, rgba(255, 255, 255, 0) 100%);
    }
  `};
`;

const Section = ({ children, hasGradient, hasSprinkles }) => (
  <Root hasGradient={hasGradient} hasSprinkles={hasSprinkles}>
    {hasSprinkles ? (
      <>
        <Sprinkles01 />
        <Sprinkles02 />
        <Sprinkles03 />
      </>
    ) : null}
    {children}
  </Root>
);

Section.propTypes = {
  hasGradient: PropTypes.bool,
  hasSprinkles: PropTypes.bool,
  children: PropTypes.node
};

export default Section;