import { withSchema } from '@websolutespa/bom-core';
import styled, { css } from 'styled-components';
import { Background } from '../../components/background/background';
import { UIStyledComponentProps } from '../../components/types';
import { getAspectResponsive, getCssResponsive, hasChildOfType } from '../../components/utils';

type Props = {
};

export type SectionProps = UIStyledComponentProps<Props>;

const SectionContainer = styled.section<SectionProps>`
  display: flex;
  flex-direction: column;
  justify-content: center;

  ${props => getCssResponsive(props, { padding: '3rem 0' })}
  ${props => getAspectResponsive(props)};
  ${props => hasBackground(props) ? css`
    color: var(--color-neutral-100);
    position: relative;

    &>:not(.background) {
      position: relative;
    }
  `: ''}
`;

function SectionBase(props: SectionProps) {
  return (
    <SectionContainer {...props}>
      {props.children}
    </SectionContainer>
  );
}

export const Section = withSchema(
  SectionBase,
  {
    Background: Background,
  });

function hasBackground(props: SectionProps): boolean {
  return hasChildOfType(props.children, Background);
}