import React from "react";
import { cn } from "./cn";

const VARIANTS = {
  primary:
    "bg-[#43BEFF] hover:bg-[#34b6ff] text-white",
  soft:
    "bg-[#A1E3F980] dark:bg-[#A1E3F919] border border-black/10 dark:border-white/10 hover:bg-[#43BEFF40] dark:hover:bg-[#43BEFF40]",
  outline:
    "bg-white dark:bg-[#16325b] border border-black/10 dark:border-white/10 hover:bg-black/5 dark:hover:bg-white/10",
  ghost:
    "bg-transparent hover:bg-black/5 dark:hover:bg-white/10",
  danger:
    "bg-red-600 hover:bg-red-700 text-white",
};

const SIZES = {
  sm: "px-3 py-1.5 text-xs rounded-xl",
  md: "px-3 py-2 text-sm rounded-xl",
  lg: "px-4 py-2 text-sm rounded-xl",
  full: "w-full px-4 py-2 text-sm rounded-xl",
};

export default function Button({
  as: Comp = "button",
  variant = "outline",
  size = "md",
  className,
  disabled,
  loading,
  leftIcon,
  rightIcon,
  children,
  ...props
}) {
  return (
    <Comp
      disabled={disabled || loading}
      className={cn(
        "inline-flex items-center justify-center gap-2 shadow transition disabled:opacity-60",
        VARIANTS[variant] || VARIANTS.outline,
        SIZES[size] || SIZES.md,
        className
      )}
      {...props}
    >
      {leftIcon ? <span className={cn(loading ? "opacity-80" : "")}>{leftIcon}</span> : null}
      {children}
      {rightIcon ? <span className={cn(loading ? "opacity-80" : "")}>{rightIcon}</span> : null}
    </Comp>
  );
}
