'use client';

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

import { ChatHeaderActionButton } from './ChatHeaderActionButton';

export interface ChatHeaderAudioToggleProps {
  /** Current muted state. */
  muted: boolean;
  /** Toggle handler. Wire to `useChatAudio().setMuted` or `toggleMute`. */
  onToggle: () => void;
  /** Override tooltip label for muted → unmuted. */
  unmuteLabel?: string;
  /** Override tooltip label for unmuted → muted. */
  muteLabel?: string;
}

/**
 * Mute / unmute notification sounds. Drop into a `<ChatHeader>` actions
 * slot or into `<ChatDock headerActions>`.
 *
 * @example
 * ```tsx
 * const audio = useChatAudio({ sounds: {...} });
 * <ChatHeaderAudioToggle muted={audio.muted} onToggle={() => audio.setMuted(!audio.muted)} />
 * ```
 */
export function ChatHeaderAudioToggle({
  muted,
  onToggle,
  unmuteLabel = 'Unmute notifications',
  muteLabel = 'Mute notifications',
}: ChatHeaderAudioToggleProps) {
  return (
    <ChatHeaderActionButton
      icon={
        muted ? (
          <VolumeX className="h-3.5 w-3.5" />
        ) : (
          <Volume2 className="h-3.5 w-3.5" />
        )
      }
      ariaLabel={muted ? unmuteLabel : muteLabel}
      onClick={onToggle}
    />
  );
}