import Link from "next/link";
import { clsx } from "clsx";
import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react";

type Common = {
  children: ReactNode;
  variant?: "primary" | "secondary" | "ghost";
  size?: "sm" | "md";
  className?: string;
};

const variants = {
  primary: "bg-forest text-white shadow-lift hover:bg-mint dark:bg-mint dark:text-ink",
  secondary: "bg-white/85 text-ink ring-1 ring-forest/15 hover:bg-white dark:bg-white/10 dark:text-paper dark:ring-white/15",
  ghost: "text-forest hover:bg-forest/8 dark:text-mint dark:hover:bg-white/10"
};

const sizes = {
  sm: "h-9 px-3 text-sm",
  md: "h-11 px-5 text-sm"
};

export function Button({ children, variant = "primary", size = "md", className, ...props }: Common & ButtonHTMLAttributes<HTMLButtonElement>) {
  return (
    <button className={clsx("inline-flex items-center justify-center gap-2 rounded-lg font-semibold transition", variants[variant], sizes[size], className)} {...props}>
      {children}
    </button>
  );
}

export function ButtonLink({ children, variant = "primary", size = "md", className, href, ...props }: Common & AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }) {
  return (
    <Link href={href} className={clsx("inline-flex items-center justify-center gap-2 rounded-lg font-semibold transition", variants[variant], sizes[size], className)} {...props}>
      {children}
    </Link>
  );
}