import clsx from "clsx";

type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & { variant?: "solid" | "line" };

/*
 * Matches site/'s .btn--solid and .btn--line exactly, including the neutral
 * border on the secondary variant. site/ does not have an accent-outlined
 * button and this app should not invent one.
 */
export function Button({ variant = "solid", className, ...rest }: Props) {
    return (
        <button
            {...rest}
            className={clsx(
                "inline-flex items-center gap-2 rounded border px-4 py-2.5 text-[0.94rem] font-semibold",
                "transition-[filter,border-color] duration-150 hover:brightness-110",
                variant === "solid"
                    ? "border-accent bg-accent text-accent-ink"
                    : "border-rule bg-panel text-ink hover:border-ink-3",
                rest.disabled && "cursor-not-allowed border-rule bg-panel text-ink-3 hover:brightness-100",
                className,
            )}
        />
    );
}