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

const StyledLink = styled(Link)`
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  margin-bottom: 1rem;

  &:hover {
    color: ${colors.orange2};
  }

  & > div {
    margin-right: 8px !important;
    margin-top: -2px !important;
  }
`;

type AddLinkProps = ComponentProps<typeof Link> & {
  text: string;
};

const AddLink: React.FC<AddLinkProps> = ({ text, ...props }) => (
  <StyledLink passHref {...props}>
    <AddIcon />
    {text}
  </StyledLink>
);

export default AddLink;
