import type { ButtonHTMLAttributes } from "react";

interface ControllerButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  controlId: string;
  selectedId: string;
  select: (id: string) => void;
}

export function ControllerButton({
  controlId,
  selectedId,
  select,
  className = "",
  onClick,
  onPointerEnter,
  ...props
}: ControllerButtonProps) {
  return (
    <button
      {...props}
      className={`${className} ${selectedId === controlId ? "is-controller-selected" : ""}`}
      onClick={(event) => {
        select(controlId);
        onClick?.(event);
      }}
      onPointerEnter={(event) => {
        select(controlId);
        onPointerEnter?.(event);
      }}
    />
  );
}