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

export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
  children: ReactNode;
  variant?: 'primary' | 'secondary' | 'ghost' | 'inherit';
  underline?: 'always' | 'hover' | 'none';
  size?: string;
  weight?: string;
  letterSpacing?: string;
  block?: boolean;
  hoverColor?: string;
  transition?: boolean;
}

export const Link = forwardRef<HTMLAnchorElement, LinkProps>(({ 
  children, 
  variant = 'primary',
  underline = 'hover',
  size,
  weight,
  letterSpacing,
  block = false,
  hoverColor,
  transition = true,
  ...props
}, ref) => {
  const variantClasses = {
    primary: 'text-[var(--ui-color-intent-primary)] hover:opacity-80',
    secondary: 'text-[var(--ui-color-text-med)] hover:text-[var(--ui-color-text-high)]',
    ghost: 'text-[var(--ui-color-text-low)] hover:text-[var(--ui-color-text-high)]',
    inherit: 'text-inherit',
  };

  const underlineClasses = {
    always: 'underline',
    hover: 'hover:underline',
    none: 'no-underline',
  };

  const classes = [
    transition ? 'transition-all duration-150 ease-in-out' : '',
    'cursor-pointer',
    block ? 'block' : 'inline',
    variantClasses[variant],
    underlineClasses[underline],
  ].join(' ');

  const style: React.CSSProperties = {
    ...(size ? { fontSize: size } : {}),
    ...(weight ? { fontWeight: weight } : {}),
    ...(letterSpacing ? { letterSpacing } : {}),
  };

  return (
    <a
      ref={ref}
      className={classes}
      style={style}
      {...props}
    >
      {children}
    </a>
  );
});

Link.displayName = 'Link';