'use client'

import classNames from 'classnames'
import { HTMLAttributes, ReactNode } from 'react'

import { PktIcon } from '..'

export interface IPktLinkCard extends Omit<HTMLAttributes<HTMLAnchorElement>, 'title'> {
  skin?: 'normal' | 'no-padding' | 'blue' | 'beige' | 'green' | 'gray' | 'beige-outline' | 'gray-outline'
  title?: string
  href?: string
  iconName?: string
  openInNewTab?: boolean
  external?: boolean
  children?: ReactNode
}

export const PktLinkCard = ({
  children,
  skin,
  title,
  href,
  iconName,
  openInNewTab,
  external,
  className,
  ...props
}: IPktLinkCard) => {
  const classes = ['pkt-linkcard', skin && `pkt-linkcard--${skin}`].filter(Boolean).join(' ')

  const titleClasses = ['pkt-linkcard__title', external && 'pkt-link pkt-link--external'].filter(Boolean).join(' ')

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

PktLinkCard.displayName = 'PktLinkCard'