import Link from 'next/link';
import React from 'react';

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'default' | 'outline' | 'primary' | 'secondary' | 'filled' | 'custom';
  size?: 'sm' | 'md' | 'lg';
  className?: string;
  href?: string;
  external?: boolean;
  fullWidthMobile?: boolean;
  fullWidth?: boolean;
}

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className = '', variant = 'default', size = 'md', children, href, external, fullWidthMobile, fullWidth, ...props }, ref) => {
    const variantClasses = {
      default: 'bg-white text-black border border-gray-200 hover:bg-gray-100',
      outline: 'bg-transparent border border-gray-300 hover:bg-gray-100',
      primary: 'bg-primary text-white hover:bg-primary-dark',
      secondary: 'bg-blue-600 text-white hover:bg-blue-700',
      filled: 'bg-primary text-white hover:bg-primary-dark',
      custom: 'bg-[#f8dbe3] text-primary hover:bg-primary hover:text-white border-0',
    };

    const sizeClasses = {
      sm: 'px-3 py-1.5 text-sm',
      md: 'px-4 py-2',
      lg: 'px-[24px] py-[12px] text-lg',
    };

    const widthClass = fullWidth 
      ? 'w-full' 
      : fullWidthMobile 
        ? 'w-full md:w-auto' 
        : '';

    const buttonClasses = `
      ${variantClasses[variant]}
      ${sizeClasses[size]}
      ${widthClass}
      ${className}
      rounded-button font-bold transition-colors focus:outline-none inline-flex justify-center items-center
    `;

    if (href) {
      const linkProps = external ? { 
        target: "_blank", 
        rel: "noopener noreferrer" 
      } : {};

      return (
        <Link 
          href={href} 
          {...linkProps} 
          className={buttonClasses}
        >
          {children}
        </Link>
      );
    }

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

Button.displayName = 'Button';