import type { ButtonHTMLAttributes } from "react";
import type { LucideIcon } from "lucide-react";
import { twMerge } from "tailwind-merge";

type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
    variant?: "primary" | "ghost";
    Icon?: LucideIcon;
};

const baseClass =
    "h-[30px] px-3 rounded-[5px] inline-flex items-center justify-center gap-2 " +
    "text-[13px] font-medium cursor-pointer transition-colors whitespace-nowrap";

const variantClass = {
    primary: "bg-primary text-white font-semibold hover:opacity-90",
    ghost:
        "text-foreground-light/70 dark:text-foreground-dark/70 " +
        "hover:text-foreground-light dark:hover:text-foreground-dark " +
        "border border-slate-200 dark:border-white/10 " +
        "hover:border-secondary/60 dark:hover:border-secondary/60",
};

export default function AdminButton({
    variant = "ghost",
    Icon,
    className,
    children,
    ...props
}: Props) {
    return (
        <button
            type="button"
            {...props}
            className={twMerge(baseClass, variantClass[variant], className)}
        >
            {Icon ? <Icon size={13} strokeWidth={2.25} /> : null}
            {children}
        </button>
    );
}