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

import styles from "./Button.module.css";

type Variant = "primary" | "secondary" | "quiet";

function classes(variant: Variant, full?: boolean, extra?: string) {
  return [styles.base, styles[variant], full ? styles.full : null, extra].filter(Boolean).join(" ");
}

/** A link that looks like a button. Used for every navigation action. */
export function ButtonLink({
  href,
  children,
  variant = "primary",
  full,
  className,
  prefetch,
  "data-event": dataEvent,
}: {
  href: string;
  children: ReactNode;
  variant?: Variant;
  full?: boolean;
  className?: string;
  prefetch?: boolean;
  "data-event"?: string;
}) {
  return (
    <Link
      href={href}
      prefetch={prefetch}
      className={classes(variant, full, className)}
      data-event={dataEvent}
    >
      {children}
    </Link>
  );
}

/** A real button, for form submission only. */
export function Button({
  children,
  variant = "primary",
  full,
  className,
  ...rest
}: {
  children: ReactNode;
  variant?: Variant;
  full?: boolean;
} & ButtonHTMLAttributes<HTMLButtonElement>) {
  return (
    <button className={classes(variant, full, className)} {...rest}>
      {children}
    </button>
  );
}

/** A plain anchor for tel:, mailto: and external links. */
export function ButtonAnchor({
  href,
  children,
  variant = "secondary",
  full,
  className,
  external,
  "data-event": dataEvent,
}: {
  href: string;
  children: ReactNode;
  variant?: Variant;
  full?: boolean;
  className?: string;
  external?: boolean;
  "data-event"?: string;
}) {
  return (
    <a
      href={href}
      className={classes(variant, full, className)}
      data-event={dataEvent}
      {...(external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
    >
      {children}
    </a>
  );
}

/** Horizontal group of actions; stacks full-width on small phones. */
export function ButtonRow({ children }: { children: ReactNode }) {
  return <div className={styles.row}>{children}</div>;
}