"use client";

import { useEffect, useState } from "react";
import {
  isConsoleUiMuted,
  setConsoleUiMuted,
} from "@/lib/consoleUiAudio";

export function MuteChip({ className = "" }: { className?: string }) {
  const [muted, setMuted] = useState(false);

  useEffect(() => {
    setMuted(isConsoleUiMuted());
  }, []);

  return (
    <button
      type="button"
      className={`console-mute ${className}`}
      onClick={() => {
        const next = !muted;
        setMuted(next);
        setConsoleUiMuted(next);
      }}
      aria-pressed={muted}
    >
      {muted ? "Sound off" : "Sound on"}
    </button>
  );
}