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

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

export function Link({ 
  href, 
  children, 
  className = '',
  variant = 'primary',
  size = 'md',
  target = '_self',
  rel = '',
  onClick,
  block = false,
  weight,
  truncate,
  hoverColor,
  transition,
  ...props
}: LinkProps) {
  const baseClasses = 'inline-flex items-center transition-colors';
  
  const variantClasses = {
    primary: 'text-primary-accent hover:text-primary-accent/80',
    secondary: 'text-telemetry-aqua hover:text-telemetry-aqua/80',
    ghost: 'text-gray-400 hover:text-gray-300'
  };

  const sizeClasses = {
    xs: 'text-xs',
    sm: 'text-sm',
    md: 'text-base',
    lg: 'text-lg'
  };

  const weightClasses: Record<string, string> = {
    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] ? weightClasses[weight] : '',
    truncate ? 'truncate' : '',
    hoverColor ? `hover:${hoverColor}` : '',
    transition ? 'transition-all duration-150' : '',
    className
  ].filter(Boolean).join(' ');
  
  return (
    <Box 
      as="a"
      href={href} 
      className={classes}
      target={target}
      rel={rel}
      onClick={onClick}
      style={{
        ...(weight && !weightClasses[weight] ? { fontWeight: weight } : {}),
        ...(props.style || {})
      }}
      {...props}
    >
      {children}
    </Box>
  );
}
