import React, { ReactNode, AnchorHTMLAttributes } from 'react';

interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
  href: string;
  children: ReactNode;
  className?: string;
  variant?: 'primary' | 'secondary' | 'ghost';
  target?: '_blank' | '_self' | '_parent' | '_top';
  rel?: string;
  onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
  style?: React.CSSProperties;
}

export function Link({ 
  href, 
  children, 
  className = '',
  variant = 'primary',
  target = '_self',
  rel = '',
  onClick,
  style,
  ...props
}: LinkProps) {
  const baseClasses = 'inline-flex items-center transition-colors';
  
  const variantClasses = {
    primary: 'text-primary-blue hover:text-primary-blue/80',
    secondary: 'text-purple-300 hover:text-purple-400',
    ghost: 'text-gray-400 hover:text-gray-300'
  };
  
  const classes = [
    baseClasses,
    variantClasses[variant],
    className
  ].filter(Boolean).join(' ');
  
  return (
    <a 
      href={href} 
      className={classes}
      target={target}
      rel={rel}
      onClick={onClick}
      style={style}
      {...props}
    >
      {children}
    </a>
  );
}