"use client";

import { Volume2, VolumeX } from "lucide-react";

import { useSound } from "@/components/sound-provider";
import { Button, type ButtonProps } from "@/components/ui/button";
import { cn } from "@/lib/utils";

type SoundToggleProps = {
  ariaLabel?: string;
  mutedAriaLabel?: string;
  variant?: ButtonProps["variant"];
  className?: string;
  iconClassName?: string;
};

export function SoundToggle({
  ariaLabel = "Mute sounds",
  mutedAriaLabel = "Unmute sounds",
  variant = "outline",
  className,
  iconClassName,
}: SoundToggleProps) {
  const { isMuted, toggleMuted } = useSound();

  return (
    <Button
      type="button"
      variant={variant}
      size="icon"
      onClick={toggleMuted}
      aria-label={isMuted ? mutedAriaLabel : ariaLabel}
      aria-pressed={isMuted}
      className={cn("group cursor-pointer", className)}
    >
      {isMuted ? (
        <VolumeX
          strokeWidth={1.6}
          className={cn("h-[1.125rem] w-[1.125rem] transition-transform duration-300 ease-out group-hover:scale-110", iconClassName)}
        />
      ) : (
        <Volume2
          strokeWidth={1.6}
          className={cn("h-[1.125rem] w-[1.125rem] transition-transform duration-300 ease-out group-hover:scale-110", iconClassName)}
        />
      )}
    </Button>
  );
}