import React from 'react'

import { classNames } from '../utils/css'
import '../tailwind.css'

export interface LinkProps {
  /** The url to link to */
  url?: string
  /** Makes the link open in a new tab */
  external?: boolean
  /** Callback when a link is clicked */
  onClick?(): void
  /** Inner content of the element */
  children?: React.ReactNode
}

const styles = {
  base: 'text-primary hover:underline'
}

export const Link = ({ children, url, external, onClick }: LinkProps) => {
  const className = classNames(styles.base)

  const target = external ? '_blank' : undefined
  const rel = external ? 'noopener noreferrer' : undefined

  return url ? (
    <a className={className} href={url} target={target} rel={rel}>
      {children}
    </a>
  ) : (
    <button className={className} onClick={onClick}>
      {children}
    </button>
  )
}
