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

const StyledSection = styled.section`
  display: grid;
  padding: 1.5rem;

  word-break: break-word;
  hyphens: auto;

  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    ". title ."
    "leftaside content rightaside";

  @media screen and (max-width: ${breakpoints.mobile}) {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto auto auto;
    grid-template-areas:
      "title"
      "content"
      "rightaside"
      "leftaside";
  }

  h6 {
    color: ${colors.orange1};
  }

  & > h1,
  & > h2,
  & > h3,
  & > h4,
  & > h5,
  & > h6 {
    text-align: center;
    grid-area: title;
    margin: 1rem 0;
  }

  p {
    margin-top: 0;
  }

  & > div, p {
    grid-area: content;
  }

  & > aside {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    @media screen and (max-width: ${breakpoints.mobile}) {
      align-items: center;
      max-width: unset;
      margin-left: unset;
      margin-top: 3rem;

      * {
        flex: 1;
      }
    }
  }

  & > aside:first-of-type {
    grid-area: rightaside;
    padding-left: 1.5rem;
    @media screen and (max-width: ${breakpoints.mobile}) {
      padding-left: 0;
    }
  }
  & > aside:nth-of-type(2) {
    grid-area: leftaside;
    padding-right: 1.5rem;
    @media screen and (max-width: ${breakpoints.mobile}) {
      padding-left: 0;
    }
  }
`;

const TextSection: React.FC<React.HTMLAttributes<HTMLDivElement>> = (props) => (
  <StyledSection {...props} />
);

export default TextSection;
