import React from 'react'
import styles from './ModalLink.module.css'

interface Props {
  href?: string
  onClick?: () => void
  children: React.ReactNode
  className?: string
}

/**
 * Componente de enlace reutilizable para modales
 * Estilo: texto azul subrayado que se usa en textos de ayuda
 * Soporta tanto navegación (href) como acciones (onClick)
 */
export const ModalLink: React.FC<Props> = ({ href, onClick, children, className = '' }) => {
  if (onClick) {
    return (
      <button
        type="button"
        onClick={onClick}
        className={`${styles.link} ${styles.linkButton} ${className}`}
      >
        {children}
      </button>
    )
  }

  return (
    <a 
      href={href || '#'} 
      target="_blank" 
      rel="noopener noreferrer"
      className={`${styles.link} ${className}`}
    >
      {children}
    </a>
  )
}

export default ModalLink