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

const Section = styled.section<{ colors: string }>`
  ${(p) => p.colors}

  display: flex;
  justify-content: center;
  text-align: center;
  align-items: baseline;
  padding: 2rem 0;
  border: 0.5rem colors.sik100Gold;
  flex-flow: row wrap;

  a {
    color: inherit;
  }

  & > a {
    font-weight: 700;
    text-decoration: none;
    margin: 0.5rem 1rem 0;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
  }

  & > h1 {
    a {
     
    text-decoration: underline;
    }
    a:hover {
      text-decoration: none;
    }
  }
`;

type Colors = "orange1" | "lightBlue" | "darkBlue" | "blue1" | "lightTurquoise" | "sik100Blue";

interface CTASectionProps extends React.HTMLAttributes<HTMLDivElement> {
  bgColor?: Colors;
  link?: string;
  linkText?: string;
}

const textColors = (bgColor: Colors) => {
  switch (bgColor) {
    case "orange1": return `
color: ${colors.white};
background-color: ${colors[bgColor]};
a:hover {
  color: ${colors.darkBlue};
}
`;
    case "sik100Blue": return `
background-color: ${colors[bgColor]};
color: ${colors.sik100Gold};
  `;
    case "darkBlue": return `
background-color: ${colors[bgColor]};
color: ${colors.white};
  `;

    case "lightBlue": return `
background-color: ${colors[bgColor]};
color: ${colors.darkBlue};
a:hover {
  color: ${colors.white};
}
  `;

    case "lightTurquoise": return `
background-color: ${colors[bgColor]};
color: ${colors.darkBlue};
a:hover {
  color: ${colors.white};
}
  `;
    case "blue1": return `
background-color: ${colors[bgColor]};
color: ${colors.white};
a:hover {
  color: ${colors.darkBlue};
}
  `;
    default: return "";
  }
};

const CTASection: React.FC<CTASectionProps> = ({
  bgColor = "orange1", link, linkText, children, ...props
}) => (
  <Section colors={textColors(bgColor)} {...props}>
    <h1>{children}</h1>
    {link && (
      <Link to={link}>
        <h4>{linkText}</h4>
      </Link>
    )}
  </Section>
);

export default CTASection;