"use client";

import { cn } from "@area/foundation";
import { motion, type HTMLMotionProps } from "motion/react";
import { type LucideIcon } from "lucide-react";
import { forwardRef, type ButtonHTMLAttributes } from "react";

interface FABProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  icon: LucideIcon;
  /** Accessible label (FAB has icon only — required for a11y). */
  label: string;
  /** Position offset from screen edges. Defaults sit above a 16px gutter. */
  offsetClassName?: string;
}

/**
 * Floating Action Button. Round, icon-only, anchored bottom-right.
 * Use for create/add/scan/quick-action affordances. Avoid for destructive actions.
 */
export const FAB = forwardRef<HTMLButtonElement, FABProps>(function FAB(
  { icon: Icon, label, offsetClassName, className, ...rest },
  ref,
) {
  // Motion's HTMLMotionProps is stricter than React's ButtonHTMLAttributes under
  // exactOptionalPropertyTypes (no `| undefined` on style sub-fields, etc.).
  // The runtime contract is unchanged — passthrough props go straight to the DOM.
  const motionProps = rest as unknown as HTMLMotionProps<"button">;

  return (
    <motion.button
      ref={ref}
      type="button"
      aria-label={label}
      initial={{ scale: 0, opacity: 0 }}
      animate={{ scale: 1, opacity: 1 }}
      whileTap={{ scale: 0.95 }}
      transition={{ type: "spring", stiffness: 380, damping: 28 }}
      className={cn(
        "fixed z-40 flex size-14 items-center justify-center rounded-full bg-accent text-background shadow-lg shadow-black/20",
        "transition-colors hover:bg-accent/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
        offsetClassName ?? "bottom-4 right-4 mb-safe",
        className,
      )}
      {...motionProps}
    >
      <Icon className="size-6" aria-hidden />
    </motion.button>
  );
});