'use client'

import classNames from 'classnames'
import { FC, LinkHTMLAttributes } from 'react'

import { PktIcon } from '..'

interface IPktLink extends LinkHTMLAttributes<HTMLAnchorElement> {
  href?: string
  iconName?: string | undefined
  className?: string | undefined
  iconPosition?: string | undefined
  external?: boolean
  target?: string | undefined
}

export const PktLink: FC<IPktLink> = ({
  href,
  iconName,
  className,
  iconPosition,
  external,
  target,
  children,
  ...props
}: IPktLink) => {
  const classes = {
    'pkt-link': true,
    'pkt-link--icon-left': (!!iconName && iconPosition === 'left') || !!(iconName && !iconPosition),
    'pkt-link--icon-right': !!iconName && iconPosition === 'right',
    'pkt-link--external': external,
  }

  return (
    <a
      {...props}
      className={classNames(classes, className)}
      href={href}
      target={target}
      rel={external ? 'noopener noreferrer' : undefined}
    >
      {iconName && <PktIcon name={iconName} className="pkt-link__icon" />}
      {children}
    </a>
  )
}

PktLink.displayName = 'PktLink'