import React from "react";
import clsx from "clsx";

export const Button = ({
  variant = "default",
  className,
  ...props
}: React.ButtonHTMLAttributes<HTMLButtonElement> & {
  variant?: "default" | "outline" | "ghost";
}) => {
  const base =
    "inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-semibold transition";
  const variants: Record<string, string> = {
    default: "bg-ink text-white hover:bg-slate-800",
    outline: "border border-slate-300 text-slate-700 hover:bg-slate-100",
    ghost: "text-slate-600 hover:bg-slate-100",
  };
  return (
    <button className={clsx(base, variants[variant], className)} {...props} />
  );
};
