import * as React from 'react';

type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
  variant?: 'default' | 'secondary' | 'ghost' | 'outline';
  size?: 'sm' | 'md';
  asChild?: boolean;
  children?: React.ReactNode;
};

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className = '', variant = 'default', size = 'md', asChild = false, children, ...props }, ref) => {
    const base =
      'inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:opacity-50 disabled:pointer-events-none';
    const variants = {
      default: 'bg-gradient-to-r from-indigo-200 via-purple-200 to-pink-200 text-slate-700 hover:from-indigo-300 hover:via-purple-300 hover:to-pink-300',
      secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200',
      ghost: 'bg-transparent hover:bg-gray-100',
      outline: 'bg-white border border-gray-200 text-slate-700 hover:bg-gray-50',
    } as const;
    const sizes = {
      sm: 'h-8 px-3 text-sm',
      md: 'h-10 px-4 text-base',
    } as const;

    const classes = `${base} ${variants[variant]} ${sizes[size]} ${className}`;

    // If used with `asChild`, clone the child element and inject props (className, ref, etc.)
    if (asChild && React.isValidElement(children)) {
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      return React.cloneElement(children as any, {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        className: [classes, (children as any).props?.className].filter(Boolean).join(' '),
        ref,
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        ...(props as any),
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
      } as any);
    }

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