import { Link } from 'react-router-dom'
import classNames from 'classnames'
import type { PropsWithChildren } from 'react'
import HorizontalMenuIcon from './HorizontalMenuIcon'

export type HorizontalMenuNavLinkProps = PropsWithChildren<{
  path: string
  isExternalLink?: boolean
  className?: string
  icon?: string
}>

const HorizontalMenuNavLink = ({
  path,
  children,
  isExternalLink,
  className,
  icon,
}: HorizontalMenuNavLinkProps) => {
  return (
    <Link
      className={classNames('flex items-center justify-start w-full', className)}
      to={path}
      target={isExternalLink ? '_blank' : ''}
    >
      <HorizontalMenuIcon icon={icon || ''} />
      <span>{children}</span>
    </Link>
  )
}

export default HorizontalMenuNavLink