import React from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';

export const LinkPrimaryOutline = ({
  link,
  title,
  as,
  onclick,
  className,
  ...props
}) => {
  return (
    <React.Fragment>
      <LinkOutline
        to={link}
        className={`btn ${className}`}
        as={as}
        onClick={onclick}
        {...props}
      >
        {title}
      </LinkOutline>
    </React.Fragment>
  );
};

export const PrimaryLink = ({ link, text, className }) => {
  return (
    <React.Fragment>
      <PrimaryLk to={link} className={`btn ${className}`}>
        {text}
      </PrimaryLk>
    </React.Fragment>
  );
};

const LinkOutline = styled(Link)`
  border: 1px solid #004bff;
  color: #004bff;
  background: #fff;
  font-weight: 700;
  font-family: var(--ff-bold);
  text-align: center;
  &.co-error {
    border: 1px solid #d50033;
    color: #d50033;
  }
`;
const PrimaryLk = styled(Link)`
  background-color: var(--co-primary);
  color: #ffffff;
  margin-left: 20px;
  cursor: pointer;
  text-transform: none;
  font-weight: 700;
  font-family: var(--ff-heading);
  text-align: center;
  &:first-letter {
    text-transform: uppercase;
  }
`;
