morethanadiagnosis-hub/web/components/common/Link.tsx

'use client'

import NextLink from 'next/link'
import React from 'react'

export interface LinkProps {
  href: string
  children: React.ReactNode
  variant?: 'primary' | 'secondary' | 'neutral'
  external?: boolean
  className?: string
  onClick?: () => void
}

const variantStyles = {
  primary: 'text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300',
  secondary: 'text-secondary-600 hover:text-secondary-700 dark:text-secondary-400 dark:hover:text-secondary-300',
  neutral: 'text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100',
}

export const Link = ({
  href,
  children,
  variant = 'primary',
  external = false,
  className = '',
  onClick,
}: LinkProps) => {
  const baseStyles = 'underline decoration-1 underline-offset-2 hover:decoration-2 transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 rounded-sm'

  const combinedClassName = `${baseStyles} ${variantStyles[variant]} ${className}`.trim()

  if (external) {
    return (
      <a
        href={href}
        className={combinedClassName}
        target="_blank"
        rel="noopener noreferrer"
        onClick={onClick}
      >
        {children}
      </a>
    )
  }

  return (
    <NextLink href={href} className={combinedClassName} onClick={onClick}>
      {children}
    </NextLink>
  )
}