// components/ui/button.tsx
"use client";

import { forwardRef } from "react";
import { motion } from "framer-motion";
import { Loader2 } from "lucide-react";
import { cva, type VariantProps } from "class-variance-authority";

const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-full font-medium transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed",
  {
    variants: {
      variant: {
        primary: "bg-gradient-to-r from-sky-600 to-blue-600 text-white shadow-md hover:shadow-lg hover:scale-105 focus:ring-sky-500",
        secondary: "bg-white border-2 border-gray-200 text-gray-700 hover:border-sky-300 hover:text-sky-600 focus:ring-sky-500",
        outline: "bg-transparent border-2 border-sky-600 text-sky-600 hover:bg-sky-50 focus:ring-sky-500",
        ghost: "bg-transparent text-gray-600 hover:bg-gray-100 hover:text-gray-900 focus:ring-gray-500",
        danger: "bg-gradient-to-r from-red-600 to-rose-600 text-white shadow-md hover:shadow-lg hover:scale-105 focus:ring-red-500",
        success: "bg-gradient-to-r from-green-600 to-emerald-600 text-white shadow-md hover:shadow-lg hover:scale-105 focus:ring-green-500",
        dark: "bg-sky-900 text-white shadow-md hover:bg-sky-950 focus:ring-sky-900 hover:scale-105",
      },
      size: {
        sm: "px-4 py-2 text-xs gap-1.5",
        md: "px-6 py-2.5 text-sm gap-2",
        lg: "px-8 py-3 text-base gap-2",
        xl: "px-10 py-4 text-lg gap-2.5",
      },
      fullWidth: {
        true: "w-full",
      },
    },
    defaultVariants: {
      variant: "primary",
      size: "md",
      fullWidth: false,
    },
  }
);

export interface ButtonProps
  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onDrag' | 'onDragEnd' | 'onDragStart'>,
    VariantProps<typeof buttonVariants> {
  loading?: boolean;
  leftIcon?: React.ReactNode;
  rightIcon?: React.ReactNode;
}

const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, fullWidth, loading, leftIcon, rightIcon, children, disabled, ...props }, ref) => {
    return (
      <motion.button
        ref={ref}
        whileTap={{ scale: 0.98 }}
        className={buttonVariants({ variant, size, fullWidth, className })}
        disabled={disabled || loading}
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        {...props as any}
      >
        {loading && <Loader2 className="animate-spin" />}
        {!loading && leftIcon}
        {children}
        {!loading && rightIcon}
      </motion.button>
    );
  }
);

Button.displayName = "Button";

export { Button, buttonVariants };