import React, { forwardRef } from 'react';
import { cva } from 'class-variance-authority';
import { cn } from '../../utils/cn';
import { Link } from 'react-router-dom';

const buttonVariants = cva(
  'inline-flex items-center justify-center rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-60 disabled:cursor-not-allowed',
  {
    variants: {
      variant: {
        primary: 'bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 shadow-sm border border-transparent',
        secondary: 'bg-white text-neutral-700 hover:bg-neutral-50 border border-neutral-300 focus:ring-primary-500',
        outline: 'bg-transparent text-primary-600 hover:bg-primary-50 border border-primary-600 focus:ring-primary-500',
        danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 shadow-sm border border-transparent',
        ghost: 'bg-transparent text-neutral-700 hover:bg-neutral-100 border-transparent',
      },
      size: {
        sm: 'px-3 py-1.5 text-sm',
        md: 'px-4 py-2 text-sm',
        lg: 'px-6 py-3 text-base',
      },
      fullWidth: {
        true: 'w-full',
      },
    },
    defaultVariants: {
      variant: 'primary',
      size: 'md',
      fullWidth: false,
    },
  }
);

export const Button = forwardRef(({
  className,
  variant,
  size,
  fullWidth,
  children,
  href,
  to,
  ...props
}, ref) => {
  const classes = cn(buttonVariants({ variant, size, fullWidth }), className);

  if (to) {
    return (
      <Link
        to={to}
        className={classes}
        ref={ref}
        {...props}
      >
        {children}
      </Link>
    );
  }

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

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

Button.displayName = 'Button'; 