import { type } from "@testing-library/user-event/dist/type";
import styled from "styled-components";
import {
  getTextSizes,
  linkColorTokens,
  textLevels,
} from "../../design-system/tokens";
import { LinkProps } from "./types";

export const StyledLink = styled.a<LinkProps>`
  [aria-current="page"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }

  cursor: pointer;
  text-decoration: none;
  ${({ year }) => {
    return {
      color: linkColorTokens[`link-default-color-${year || 2022}`],
      ":hover": {
        color: linkColorTokens[`link-hover-color-${year || 2022}`],
      },
      ":active": {
        color: linkColorTokens[`link-active-color-${year || 2022}`],
      },
      ":visited": {
        color: linkColorTokens[`link-visited-color-${year || 2022}`],
      },
    };
  }}
  ${getTextSizes(textLevels["LINK"])};
`;