"use client";

import { ArcLink } from "../lib/arc-provider";
import { playUiSound } from "../sound/play";
import styles from "./button-link.module.css";

export function ButtonLink({ href, variant = "primary", size = "md", disabled = false, children }) {
  return (
    <ArcLink
      href={href}
      className={[styles.link, styles[variant], styles[size]].join(" ")}
      aria-disabled={disabled || undefined}
      tabIndex={disabled ? -1 : undefined}
      onClick={(event) => {
        if (disabled) return event.preventDefault();
        playUiSound("click");
      }}
    >
      <span className={styles.label}>{children}</span>
    </ArcLink>
  );
}