import { forwardRef } from "react";
import type { ButtonHTMLAttributes } from "react";
import clsx from "clsx";
import { FocusSafeButton } from "./FocusSafeButton";

// A click SURFACE: a button whose content is the control — a card, a list row, a poster tile, a menu
// row, a thumbnail that opens its video. It is not an action button (that is `Button`, with a label and
// a rung) and not a glyph (`IconButton`); it owns what every such surface needs and kept forgetting:
// `type="button"` (never a stray form submit), a left-aligned body, the focus-safe disabled state, and,
// on request, the B3 state layer for a row that has no hover of its own. `className` lays the surface
// out; its paint is the surface's own (a card's glass, a row's layer).
export const Pressable = forwardRef<
  HTMLButtonElement,
  ButtonHTMLAttributes<HTMLButtonElement> & {
    /** Paint the B3 hover/pressed layer (a plain row or menu item; a card has its own hover). */
    layer?: boolean;
    /** A tile with a caption under a picture reads centred; everything else left. */
    align?: "left" | "center";
    /** Working: unavailable and announced as busy. */
    busy?: boolean;
    /** Its text is a title or a name: it stays selectable (see FocusSafeButton). */
    selectable?: boolean;
  }
>(function Pressable({ type, layer = false, align = "left", className, ...rest }, ref) {
  return (
    <FocusSafeButton
      ref={ref}
      type={type ?? "button"}
      className={clsx(
        align === "center" ? "text-center" : "text-left",
        layer && "state-layer",
        className,
      )}
      {...rest}
    />
  );
});