import * as React from "react"
import cls from "classnames"
import { Link } from "gatsby"
import Icon from "@/components/icon"
import * as styles from "./index.module.scss"

interface IProps {
  textColor?: "white"
  to?: string
}

function LinkModule<P extends React.HTMLAttributes<HTMLDivElement & HTMLAnchorElement>>(props: IProps & P) {
  const { className, textColor, to, ...rest } = props
  const textColorClassName = textColor
    ? `${styles["systemLink" + props.textColor]}`
    : `${styles.systemLink}`
  const classNameProp = cls(textColorClassName, className)

  const childrenDOM = (
    <>
      {props.children}
      <Icon name="arrow-right" />
    </>
  )

  return to ? (
    <Link className={classNameProp} to={to} {...rest}>
      {childrenDOM}
    </Link>
  ) : (
    <div className={classNameProp} {...rest}>
      {childrenDOM}
    </div>
  )
}

export default LinkModule