import { ButtonHTMLAttributes } from "react";
import { cn } from "@/lib/utils";

type Variant = "primary" | "outline" | "ghost" | "pill" | "teal" | "icon";

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: Variant;
  icon?: React.ReactNode;
}

const variants: Record<Variant, string> = {
  primary:
    "bg-gray-900 text-white hover:bg-gray-700",
  outline:
    "border border-gray-300 text-gray-700 hover:bg-gray-50",
  ghost:
    "text-gray-600 hover:bg-gray-100",
  pill:
    "bg-white border border-gray-200 text-gray-700 hover:bg-gray-100 rounded-full px-4 py-2 text-sm font-medium gap-2",
  teal:
    "bg-[#00BCD4] text-white hover:bg-[#00a8be] rounded-full px-5 py-2 text-sm font-medium",
  icon:
    "w-9 h-9 rounded-full bg-white border border-gray-200 text-gray-500 hover:bg-gray-100 p-0",
};

export default function Button({
  variant = "primary",
  icon,
  className,
  children,
  ...props
}: ButtonProps) {
  return (
    <button
      className={cn(
        "inline-flex items-center justify-center transition-colors focus:outline-none disabled:pointer-events-none disabled:opacity-50",
        variant === "primary" && "rounded-lg px-4 py-2 text-sm font-medium",
        variants[variant],
        className
      )}
      {...props}
    >
      {icon && <span className="flex items-center">{icon}</span>}
      {children}
    </button>
  );
}
