import React, { ReactNode, AnchorHTMLAttributes, ElementType } from 'react';
import { Box, BoxProps } from './Box';

interface LinkProps extends Omit<BoxProps<'a'>, 'children' | 'className' | 'onClick'> {
  href: string;
  children: ReactNode;
  className?: string;
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'xs' | 'sm' | 'md' | 'lg';
  target?: '_blank' | '_self' | '_parent' | '_top';
  rel?: string;
  onClick?: React.MouseEventHandler<HTMLAnchorElement>;
  style?: React.CSSProperties;
  block?: boolean;
  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
  truncate?: boolean;
}

export function Link({ 
  href, 
  children, 
  className = '',
  variant = 'primary',
  size = 'md',
  target = '_self',
  rel = '',
  onClick,
  style,
  block = false,
  weight,
  truncate,
  ...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 sizeClasses = {
    xs: 'text-xs',
    sm: 'text-sm',
    md: 'text-base',
    lg: 'text-lg'
  };

  const weightClasses = {
    light: 'font-light',
    normal: 'font-normal',
    medium: 'font-medium',
    semibold: 'font-semibold',
    bold: 'font-bold'
  };
  
  const classes = [
    block ? 'flex' : baseClasses,
    variantClasses[variant],
    sizeClasses[size],
    weight ? weightClasses[weight] : '',
    truncate ? 'truncate' : '',
    className
  ].filter(Boolean).join(' ');
  
  return (
    <Box 
      as="a"
      href={href} 
      className={classes}
      target={target}
      rel={rel}
      onClick={onClick as any}
      style={style}
      {...props}
    >
      {children}
    </Box>
  );
}