import styled from "@emotion/styled";
import { css } from "@emotion/react";
import { Link as ConnectedLink } from 'react-router-dom';


export const StyledLink = styled(ConnectedLink)<{
  contrast?: boolean;
  inheritColor?: boolean;
}>`
  font-weight: 400;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  color: ${(props: any) =>
    props.contrast ? "var(--text-contrast)" : "var(--dark-link)"};

  ${(props) => {
    if (props.contrast) {
      return css`
        &:hover {
          color: var(--dark-link);
        }
      `;
    }
  }}

  ${(props) => {
    if (props.inheritColor) {
      return css`
        font-weight: inherit;
        color: inherit;
        text-decoration: inherit;
      `;
    }
  }}
`;