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

const base =
  "inline-flex min-h-11 items-center justify-center border-2 border-fg bg-transparent px-8 py-3 font-display text-[13px] font-semibold uppercase tracking-btn text-fg transition-[background-color,color,border-color] duration-[var(--motion-medium)] ease-[var(--ease-out)] hover:bg-fg hover:text-bg active:scale-[0.98] disabled:pointer-events-none disabled:opacity-40";

type ButtonProps = {
  children: ReactNode;
  className?: string;
  onClick?: () => void;
  type?: "button" | "submit";
  disabled?: boolean;
};

export function OutlineButton({
  children,
  className,
  onClick,
  type = "button",
  disabled,
}: ButtonProps) {
  return (
    <button type={type} onClick={onClick} disabled={disabled} className={cn(base, className)}>
      {children}
    </button>
  );
}

type LinkProps = {
  children: ReactNode;
  to: string;
  className?: string;
  hash?: string;
};

export function OutlineLink({ children, to, className, hash }: LinkProps) {
  if (to.startsWith("http") || to.startsWith("mailto:")) {
    return (
      <a href={to} className={cn(base, className)}>
        {children}
      </a>
    );
  }
  return (
    <a href={hash ? `${to}#${hash}` : to} className={cn(base, className)}>
      {children}
    </a>
  );
}