import React, { ReactNode } from 'react';
import NextLink from 'next/link';

interface LinkProps {
  href: string;
  children: ReactNode;
  className?: string;
  variant?: 'primary' | 'secondary' | 'ghost';
  target?: '_blank' | '_self' | '_parent' | '_top';
  rel?: string;
}

export function Link({ 
  href, 
  children, 
  className = '',
  variant = 'primary',
  target = '_self',
  rel = ''
}: 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 (
    <NextLink 
      href={href} 
      className={classes}
      target={target}
      rel={rel}
    >
      {children}
    </NextLink>
  );
}