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

interface HeroAsideItemProps {
  header: string;
  text?: string;
  link: string;
  linkText: string;
}

const Article = styled.article`
  margin-bottom: 1rem;
`;

export const HeroAsideItem: React.FC<HeroAsideItemProps> = ({
  header, text, link, linkText,
}) => (
  <Article>
    <h2>{header}</h2>
    {text && (
      <p>{text}</p>
    )}
    <Link to={link}>
      <h6>
        {linkText}
      </h6>
    </Link>
  </Article>
);

type Colors = "darkBlue" | "lightTurquoise";

interface HeroAsideProps {
  bgColor: Colors;
}

// TODO: Color combos
const Aside = styled.aside<{ colors: string }>`
  ${(p) => p.colors}
  flex: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;

  & > div {
    h2 {
      word-break: break-word;
      hyphens: auto;
      text-transform: uppercase;
      letter-spacing: 3px;
      line-height: 1.5rem;
    }

    p {
      margin: 0;
      line-height: 2rem;
    }


    & > p {
      font-weight: 600;
      margin-bottom: 2rem;
    }

    a {
      line-height: 2rem;
      font-weight: 600;
      text-transform: uppercase;
      text-decoration: none;
      letter-spacing: 0.1rem;
    }
  }
`;

const textColors = (bgColor: Colors) => {
  switch (bgColor) {
    case "darkBlue":
      return `
background-color: ${colors[bgColor]};
color: ${colors.lightBlue};
`;
    case "lightTurquoise":
      return `
background-color: ${colors[bgColor]};
color: ${colors.darkBlue};
  `;
    default: return "";
  }
};

const HeroAside: React.FC<HeroAsideProps> = ({ bgColor, children }) => (
  <Aside colors={textColors(bgColor)}>
    <div>
      {children}
    </div>
  </Aside>
);

export default HeroAside;
