/** @jsx jsx */
import { css, jsx } from "@emotion/core";
// import * as React from "react";

// @ts-ignore
import COLORS from "../../constants/colors";

// const animatedLinkText = css`
//   width: auto;
//   text-decoration: none;
//   padding-bottom: 0;
//   vertical-align: bottom;
//   color: ${COLORS.PURPLE.NORMAL};
//   position: relative;
//   display: inline-block;
//   &:after {
//     display: block;
//     content: '';
//     border-bottom: solid 1px ${COLORS.PURPLE.NORMAL};
//     transform: scaleX(0);
//     transition: transform 250ms ease-in-out;
//     transform-origin: 100% 50%;
//   }
//   &:hover:after {
//     transform: scaleX(1);
//     transform-origin: 0 50%;
//   }
// `;

// const linkText = css`
//   text-decoration: none;
//   color: inherit;
// `;

const AnchorTextAtom = ({ to, animated, className, ...props }: any) => (
  <a
    href={to}
    {...props}
    data-test={props["data-test"]}
    // className={className}
    // css={[props.css, animated ? animatedLinkText : linkText ]}
    css={[css`font-weight: 100`,'mt8', css`font-weight: 600`]}
    className={`fw1 fw6`}
  />
);

AnchorTextAtom.displayName = "AnchorTextAtom";

export { AnchorTextAtom };