"use client";

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

type ButtonVariant = "primary" | "outline" | "ghost";
type ButtonSize = "sm" | "icon-sm";

const variantClassNames: Record<ButtonVariant, string> = {
  primary: "border-[#7dc8cf]/35 bg-[#7dc8cf]/18 text-[#dff8fa] hover:bg-[#7dc8cf]/26",
  outline: "border-[#39434b] text-[#c9cccf] hover:bg-[#22272c] hover:text-[#f2f4f4]",
  ghost: "border-transparent text-[#c9cccf] hover:border-[#39434b] hover:bg-[#22272c] hover:text-[#f2f4f4]",
};

const sizeClassNames: Record<ButtonSize, string> = {
  sm: "h-8 px-3 text-xs",
  "icon-sm": "size-6 p-0 text-sm",
};

export function Button({
  className,
  variant = "outline",
  size = "sm",
  type = "button",
  ...props
}: ButtonHTMLAttributes<HTMLButtonElement> & {
  variant?: ButtonVariant;
  size?: ButtonSize;
}) {
  return (
    <button
      type={type}
      className={cn(
        "inline-flex items-center justify-center rounded-md border font-medium outline-none transition focus-visible:ring-2 focus-visible:ring-[#7dc8cf]/45 disabled:pointer-events-none disabled:opacity-50",
        variantClassNames[variant],
        sizeClassNames[size],
        className,
      )}
      {...props}
    />
  );
}