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

const StyledSection = styled.section`
  display: grid;
  padding: 24px;

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

  @media screen and (max-width: 800px) {
    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;
  }


  & > div, p {
    grid-area: content;
    max-width: 1000px;

  }

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

    @media screen and (max-width: 800px) {
      align-items: center;
      max-width: unset;
      margin-left: unset;
      margin-top: 48px;

      * {
        flex: 1;
      }
    }
  }

  & > aside:first-of-type {
    grid-area: rightaside;
    padding-left: 24px;
    @media screen and (max-width: 800px) {
      padding-left: 0;
    }
  }
  & > aside:nth-of-type(2) {
    grid-area: leftaside;
    padding-right: 24px;
    @media screen and (max-width: 800px) {
      padding-left: 0;
    }
  }
`;

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

export default TextSection;