import React from "react";
import styled from "styled-components";
import { colors } from "@theme/colors";

const Note = styled.span`
  color: white;
  transform-origin: right;
  transform: rotate(-90deg);
  height: fit-content;
  text-transform: uppercase;
  font-size: 2.5rem;
  font-weight: bold;
  margin: -1rem 2rem 3rem;
`;

const Item = styled.div`
  display: flex;
  text-align: left;
  flex: 1 0;
  margin: 1rem 2rem 1rem;
`;

interface HeroSecondarySectionItemProps {
  note?: string;
}

export const HeroSecondarySectionItem: React.FC<HeroSecondarySectionItemProps> = ({ note, children }) => (
  <Item>
    <Note>
      {note}
    </Note>
    {children}
  </Item>
);

const Section = styled.section`
  background-color: ${colors.green1};
  color: ${colors.darkBlue};

  h1 {
    padding: 1rem 0;
    text-align: center;
  }
`;

const Items = styled.div`
  display: flex;
  flex-flow: row wrap;
`;

interface HeroSecondarySectionProps {
  heading: string;
}

const HeroSecondarySection: React.FC<HeroSecondarySectionProps> = ({ heading, children }) => (
  <Section>
    <h1>{heading}</h1>
    <Items>
      {children}
    </Items>
  </Section>
);

export default HeroSecondarySection;
