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

interface PageLinkProps {
  to: string;
  desc: string;
}

const StyledPageLink = styled.div`
  border-left-color: ${colors.blue1};
  border-left-width: 0.8rem;
  border-left-style: solid;
  margin: 0 1rem 1rem 0;

  p {
    margin-block-start: 0;
    margin-block-end: 0;
    color: ${colors.darkBlue};
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 800;
    margin-left: 1rem;
    margin-bottom: 0.5rem;
    padding: 0;
  }

  a {
    display: block;
    margin-left: 1rem;
    text-decoration: none;
    font-weight: normal;
    color: ${colors.blue1};

    &:hover {
      color: ${colors.darkBlue};
    }
  }
`;

const PageLink: React.FC<PageLinkProps> = ({ to, desc, children }) => (
  <StyledPageLink>
    <p>{children}</p>
    <Link to={to}>{desc}</Link>
  </StyledPageLink>
);

export default PageLink;