macOS Volume HUD

"use client";

import {
  Fragment,
  type KeyboardEvent,
  type ReactNode,
  type Ref,
  useEffect,
  useRef,
  useState,
} from "react";
import * as SliderPrimitive from "@radix-ui/react-slider";
import {
  animate,
  AnimatePresence,
  motion,
  useReducedMotion,
} from "motion/react";
import {
  CaretDown,
  Check,
  Pause,
  Play,
  SkipBack,
  SkipForward,
  SpeakerHigh,
  SpeakerLow,
  SpeakerSlash,
  X,
} from "@phosphor-icons/react";

import { cn } from "@/lib/cn";

/* ─── Springs ─── */

const SPRING = {
  type: "spring" as const,
  stiffness: 380,
  damping: 32,
  mass: 0.7,
};

const MUTE_SPRING = {
  type: "spring" as const,
  stiffness: 280,
  damping: 28,
};

const ICON_SPRING = {
  type: "spring" as const,
  stiffness: 500,
  damping: 30,
};

const TOGGLE_SPRING = {
  type: "spring" as const,
  stiffness: 700,
  damping: 32,
};

const WAVE_SPRING = {
  type: "spring" as const,
  stiffness: 280,
  damping: 22,
};

const EXIT_SPRING = {
  type: "spring" as const,
  stiffness: 600,
  damping: 38,
};

const INSTANT_TRANSITION = { duration: 0 } as const;

const PROGRESS_TRANSITION = { duration: 0.5, ease: "linear" as const };

const CHEVRON_TRANSITION = {
  opacity: { duration: 0.15 },
  rotate: SPRING,
};

/* ─── Types & defaults ─── */

interface Device {
  id: string;
  label: string;
  emoji?: string;
  batteries?: { left: number; right: number; case: number };
}

interface Track {
  title: string;
  artist: string;
  duration: number;
  artworkUrl?: string;
}

const DEFAULT_DEVICES: Device[] = [
  {
    id: "airpods",
    label: "junhan's airpods",
    emoji: "🎧",
    batteries: { left: 87, right: 89, case: 64 },
  },
  { id: "macbook", label: "MacBook Pro Speakers", emoji: "🔊" },
  { id: "display", label: "External Display", emoji: "🖥" },
];

const DEFAULT_TRACK: Track = {
  title: "Midnight Drive",
  artist: "Aurora Synths",
  duration: 234,
};

const WAVE_BAR_COUNT = 4;

/* ─── InlineWaveform ─── */

function InlineWaveform({ isPlaying }: { isPlaying: boolean }) {
  const reduce = useReducedMotion();
  const [heights, setHeights] = useState<number[]>(() =>
    Array.from({ length: WAVE_BAR_COUNT }, () => 0.4),
  );

  useEffect(() => {
    if (!isPlaying || reduce) return;
    const interval = setInterval(() => {
      setHeights((prev) =>
        prev.map((_, i) => {
          const t = Date.now() / 180 + i * 0.85;
          return Math.abs(Math.sin(t)) * 0.6 + 0.3;
        }),
      );
    }, 90);
    return () => clearInterval(interval);
  }, [isPlaying, reduce]);

  return (
    <AnimatePresence>
      {isPlaying && (
        <motion.div
          key="wave"
          initial={{ opacity: 0, scale: 0.6 }}
          animate={{ opacity: 1, scale: 1 }}
          exit={{ opacity: 0, scale: 0.6 }}
          transition={ICON_SPRING}
          className="flex h-3 shrink-0 items-end gap-[1.5px]"
          aria-hidden
        >
          {heights.map((h, i) => (
            <motion.span
              key={i}
              className="block w-[1.5px] rounded-full bg-black/60"
              animate={{ height: `${Math.max(h * 100, 30)}%` }}
              transition={WAVE_SPRING}
            />
          ))}
        </motion.div>
      )}
    </AnimatePresence>
  );
}

/* ─── Battery indicators ─── */

function EarbudIcon({ isLeft }: { isLeft: boolean }) {
  return (
    <svg
      width="10"
      height="14"
      viewBox="0 0 10 14"
      fill="currentColor"
      aria-hidden
    >
      <path d="M5 1C2.9 1 1.2 2.5 1.2 4.4c0 1.5 1 2.7 2.3 3.1l.3 4.8c0 .4.3.7.7.7h1c.4 0 .7-.3.7-.7l.3-4.8c1.3-.4 2.3-1.6 2.3-3.1C8.8 2.5 7.1 1 5 1z" />
      <ellipse
        cx={isLeft ? "7" : "3"}
        cy="4.2"
        rx="0.6"
        ry="0.9"
        fill="white"
        opacity="0.4"
      />
    </svg>
  );
}

function CaseIcon() {
  return (
    <svg
      width="13"
      height="10"
      viewBox="0 0 13 10"
      fill="currentColor"
      aria-hidden
    >
      <rect x="0.5" y="0.5" width="12" height="9" rx="2.5" />
      <rect
        x="6"
        y="2.5"
        width="1"
        height="5"
        rx="0.5"
        fill="white"
        opacity="0.4"
      />
    </svg>
  );
}

function BatteryItem({
  icon,
  percent,
}: {
  icon: ReactNode;
  percent: number;
}) {
  const percentColor =
    percent < 20
      ? "text-[#ff453a]"
      : percent < 50
        ? "text-[#ff9f0a]"
        : "text-black/80";

  return (
    <div className="flex items-center gap-1">
      <span className="flex h-[14px] items-center text-black/70">{icon}</span>
      <span
        className={cn(
          "text-[10px] font-medium tabular-nums leading-none",
          percentColor,
        )}
      >
        {Math.round(percent)}%
      </span>
    </div>
  );
}

function BatteryRow({
  batteries,
}: {
  batteries: NonNullable<Device["batteries"]>;
}) {
  return (
    <div className="flex items-center justify-around px-3 py-1.5">
      <BatteryItem icon={<EarbudIcon isLeft />} percent={batteries.left} />
      <BatteryItem
        icon={<EarbudIcon isLeft={false} />}
        percent={batteries.right}
      />
      <BatteryItem icon={<CaseIcon />} percent={batteries.case} />
    </div>
  );
}

/* ─── NowPlayingCard ─── */

function NowPlayingCard({
  track,
  isPlaying,
  position,
  onPlayPause,
  onPrev,
  onNext,
}: {
  track: Track;
  isPlaying: boolean;
  position: number;
  onPlayPause: () => void;
  onPrev: () => void;
  onNext: () => void;
}) {
  const progressPercent = Math.min((position / track.duration) * 100, 100);

  return (
    <div className="flex gap-3 px-4 py-3">
      <div
        className="size-[88px] shrink-0 overflow-hidden rounded-[10px] shadow-[0_3px_8px_rgba(0,0,0,0.22)]"
        style={{
          backgroundImage: track.artworkUrl
            ? `url(${track.artworkUrl})`
            : "conic-gradient(from 210deg at 60% 35%, #ffb38a, #ff6a88, #c2a3f5, #76b3ff, #ffb38a)",
          backgroundSize: "cover",
          backgroundPosition: "center",
        }}
        aria-hidden
      />
      <div className="flex min-w-0 flex-1 flex-col justify-between py-0.5">
        <div>
          <div className="flex items-center gap-1.5">
            <span className="flex-1 truncate text-[13px] leading-tight font-semibold text-black/90">
              {track.title}
            </span>
            <InlineWaveform isPlaying={isPlaying} />
          </div>
          <div className="mt-0.5 truncate text-[12px] leading-tight text-black/55">
            {track.artist}
          </div>
        </div>
        <div>
          <div className="h-[3px] w-full overflow-hidden rounded-full bg-black/15">
            <motion.div
              className="h-full rounded-full bg-black/65"
              animate={{ width: `${progressPercent}%` }}
              transition={PROGRESS_TRANSITION}
            />
          </div>
          <div className="mt-2 flex items-center justify-around">
            <button
              type="button"
              onClick={onPrev}
              aria-label="Previous"
              className="relative cursor-pointer p-0.5 text-black/65 transition-colors before:absolute before:-inset-2 before:content-[''] hover:text-black/90 focus-visible:ring-2 focus-visible:ring-black/40 focus-visible:outline-none active:scale-[0.97]"
            >
              <SkipBack size={15} weight="fill" />
            </button>
            <button
              type="button"
              onClick={onPlayPause}
              aria-label={isPlaying ? "Pause" : "Play"}
              className="relative flex h-6 w-6 cursor-pointer items-center justify-center text-black/85 transition-colors before:absolute before:-inset-1 before:content-[''] hover:text-black focus-visible:ring-2 focus-visible:ring-black/40 focus-visible:outline-none active:scale-[0.97]"
            >
              <AnimatePresence mode="wait" initial={false}>
                <motion.span
                  key={isPlaying ? "pause" : "play"}
                  initial={{ scale: 0.55, opacity: 0 }}
                  animate={{ scale: 1, opacity: 1 }}
                  exit={{ scale: 0.55, opacity: 0 }}
                  transition={ICON_SPRING}
                  className="absolute inset-0 flex items-center justify-center"
                >
                  {isPlaying ? (
                    <Pause size={20} weight="fill" />
                  ) : (
                    <Play size={20} weight="fill" />
                  )}
                </motion.span>
              </AnimatePresence>
            </button>
            <button
              type="button"
              onClick={onNext}
              aria-label="Next"
              className="relative cursor-pointer p-0.5 text-black/65 transition-colors before:absolute before:-inset-2 before:content-[''] hover:text-black/90 focus-visible:ring-2 focus-visible:ring-black/40 focus-visible:outline-none active:scale-[0.97]"
            >
              <SkipForward size={15} weight="fill" />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ─── DeviceListItem ─── */

function DeviceListItem({
  buttonRef,
  device,
  isSelected,
  isFocused,
  onSelect,
  onFocus,
}: {
  buttonRef?: Ref<HTMLButtonElement>;
  device: Device;
  isSelected: boolean;
  isFocused: boolean;
  onSelect: () => void;
  onFocus: () => void;
}) {
  return (
    <button
      ref={buttonRef}
      type="button"
      role="radio"
      aria-checked={isSelected}
      tabIndex={isFocused ? 0 : -1}
      onClick={onSelect}
      onFocus={onFocus}
      className="relative flex w-full cursor-pointer items-center gap-1.5 rounded-md px-1.5 py-1 text-[12px] text-black/85 transition-colors before:absolute before:inset-x-0 before:-inset-y-1 before:content-[''] hover:bg-black/5 focus-visible:ring-2 focus-visible:ring-black/40 focus-visible:outline-none active:bg-black/10"
    >
      <span className="flex h-3 w-3 shrink-0 items-center justify-center">
        {isSelected && (
          <Check size={10} weight="bold" className="text-black/85" />
        )}
      </span>
      <span className="flex-1 truncate text-left">
        {device.label}
        {device.emoji ? ` ${device.emoji}` : ""}
      </span>
    </button>
  );
}

/* ─── SpatialToggle ─── */

function SpatialToggle({
  checked,
  onChange,
}: {
  checked: boolean;
  onChange: () => void;
}) {
  return (
    <button
      type="button"
      onClick={onChange}
      role="switch"
      aria-checked={checked}
      aria-label="Spatial Audio"
      className={cn(
        "relative h-[18px] w-[30px] shrink-0 cursor-pointer rounded-full transition-colors",
        "before:absolute before:inset-x-0 before:-inset-y-1.5 before:content-['']",
        "focus-visible:ring-2 focus-visible:ring-black/40 focus-visible:outline-none",
        checked ? "bg-[#0a84ff]" : "bg-black/20",
      )}
    >
      <motion.span
        className="absolute top-[2px] block h-[14px] w-[14px] rounded-full bg-white shadow-[0_1px_2px_rgba(0,0,0,0.25)]"
        animate={{ x: checked ? 14 : 2 }}
        transition={TOGGLE_SPRING}
      />
    </button>
  );
}

/* ─── MacosVolumeHud ─── */

interface MacosVolumeHudProps {
  className?: string;
  defaultValue?: number;
  devices?: Device[];
  defaultDeviceId?: string;
  defaultSpatialAudio?: boolean;
  track?: Track;
  defaultPlaying?: boolean;
  defaultPosition?: number;
  onClose?: () => void;
  onValueChange?: (value: number) => void;
  onDeviceChange?: (deviceId: string) => void;
  onSpatialAudioChange?: (enabled: boolean) => void;
  onPlayingChange?: (playing: boolean) => void;
}

/**
 * macOS-style Volume HUD with frosted glass, smooth spring interactions,
 * a click-to-expand audio output picker, live waveform visualizer,
 * AirPods battery rings and a Now Playing mini-card.
 * @param {string} className - Additional CSS classes [Optional]
 * @param {number} defaultValue - Initial volume 0-100 [Optional, default: 50]
 * @param {Device[]} devices - Available output devices [Optional, default: airpods/macbook/display]
 * @param {string} defaultDeviceId - Initially selected device id [Optional, default: first device]
 * @param {boolean} defaultSpatialAudio - Initial spatial audio state [Optional, default: true]
 * @param {Track} track - Now playing track [Optional, default: Midnight Drive demo track]
 * @param {boolean} defaultPlaying - Initial playback state [Optional, default: true]
 * @param {number} defaultPosition - Initial playback position seconds [Optional, default: 78]
 * @param {Function} onClose - Called when close button is pressed [Optional]
 * @param {Function} onValueChange - Called when volume changes [Optional]
 * @param {Function} onDeviceChange - Called when output device changes [Optional]
 * @param {Function} onSpatialAudioChange - Called when spatial audio is toggled [Optional]
 * @param {Function} onPlayingChange - Called when play/pause is toggled [Optional]
 */
export function MacosVolumeHud({
  className,
  defaultValue = 50,
  devices = DEFAULT_DEVICES,
  defaultDeviceId = devices[0]?.id ?? "",
  defaultSpatialAudio = true,
  track = DEFAULT_TRACK,
  defaultPlaying = true,
  defaultPosition = 78,
  onClose,
  onValueChange,
  onDeviceChange,
  onSpatialAudioChange,
  onPlayingChange,
}: MacosVolumeHudProps) {
  const reduce = useReducedMotion();
  const [value, setValue] = useState(defaultValue);
  const [isDragging, setIsDragging] = useState(false);
  const [isHovering, setIsHovering] = useState(false);
  const [isExpanded, setIsExpanded] = useState(false);
  const [selectedDeviceId, setSelectedDeviceId] = useState(defaultDeviceId);
  const [isSpatialAudio, setIsSpatialAudio] = useState(defaultSpatialAudio);
  const [isPlaying, setIsPlaying] = useState(defaultPlaying);
  const [position, setPosition] = useState(defaultPosition);
  const [focusedDeviceIndex, setFocusedDeviceIndex] = useState(() =>
    Math.max(
      0,
      devices.findIndex((d) => d.id === defaultDeviceId),
    ),
  );
  const lastNonZeroRef = useRef(defaultValue);
  const animationRef = useRef<{ stop: () => void } | null>(null);
  const deviceItemRefs = useRef<(HTMLButtonElement | null)[]>([]);

  const isMuted = value <= 0.5;
  const isCloseVisible = isHovering || isDragging;
  const selectedDevice =
    devices.find((d) => d.id === selectedDeviceId) ?? devices[0];
  const layoutTransition = reduce ? INSTANT_TRANSITION : SPRING;
  const exitTransition = reduce ? INSTANT_TRANSITION : EXIT_SPRING;

  useEffect(() => {
    if (!isDragging) return;
    const handleUp = () => setIsDragging(false);
    document.addEventListener("pointerup", handleUp);
    return () => document.removeEventListener("pointerup", handleUp);
  }, [isDragging]);

  useEffect(() => {
    if (!isPlaying || !isExpanded || reduce) return;
    const interval = setInterval(() => {
      setPosition((p) => (p + 1) % track.duration);
    }, 1000);
    return () => clearInterval(interval);
  }, [isPlaying, isExpanded, reduce, track.duration]);

  useEffect(
    () => () => {
      animationRef.current?.stop();
      animationRef.current = null;
    },
    [],
  );

  const stopAnimation = () => {
    if (animationRef.current) {
      animationRef.current.stop();
      animationRef.current = null;
    }
  };

  const handleValueChange = (vals: number[]) => {
    stopAnimation();
    const v = vals[0];
    setValue(v);
    if (v > 0) lastNonZeroRef.current = v;
    onValueChange?.(v);
  };

  const animateTo = (target: number) => {
    stopAnimation();
    animationRef.current = animate(value, target, {
      ...MUTE_SPRING,
      onUpdate: (v) => {
        setValue(v);
        onValueChange?.(v);
      },
      onComplete: () => {
        animationRef.current = null;
      },
    });
  };

  const handleMuteToggle = () => {
    if (isMuted) {
      animateTo(lastNonZeroRef.current);
    } else {
      lastNonZeroRef.current = value;
      animateTo(0);
    }
  };

  const handleSelectDevice = (id: string) => {
    setSelectedDeviceId(id);
    onDeviceChange?.(id);
    setIsExpanded(false);
  };

  const handleDeviceListKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
    if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
    e.preventDefault();
    const dir = e.key === "ArrowDown" ? 1 : -1;
    const next =
      (focusedDeviceIndex + dir + devices.length) % devices.length;
    setFocusedDeviceIndex(next);
    deviceItemRefs.current[next]?.focus();
  };

  const handleSpatialAudio = () => {
    const next = !isSpatialAudio;
    setIsSpatialAudio(next);
    onSpatialAudioChange?.(next);
  };

  const handlePlayPause = () => {
    const next = !isPlaying;
    setIsPlaying(next);
    onPlayingChange?.(next);
  };

  const handlePrev = () => setPosition(0);
  const handleNext = () => setPosition(0);

  return (
    <motion.div
      className={cn(
        "relative rounded-[22px]",
        "bg-white/50 backdrop-blur-xl backdrop-saturate-200 backdrop-brightness-110",
        "border border-white/40",
        "shadow-[0_10px_40px_rgba(0,0,0,0.18),0_2px_8px_rgba(0,0,0,0.08),inset_0_1px_0_rgba(255,255,255,0.55)]",
        className,
      )}
      initial={{ opacity: 0, y: -8, scale: 0.96, width: 280 }}
      animate={{
        opacity: 1,
        y: 0,
        scale: 1,
        width: isExpanded ? 320 : 280,
      }}
      transition={layoutTransition}
      onMouseEnter={() => setIsHovering(true)}
      onMouseLeave={() => setIsHovering(false)}
    >
      <AnimatePresence>
        {isCloseVisible && (
          <motion.button
            key="close"
            type="button"
            onClick={onClose}
            aria-label="Close"
            initial={{ opacity: 0, scale: 0.5 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.5 }}
            transition={ICON_SPRING}
            className={cn(
              "absolute -top-1.5 -left-1.5 z-10",
              "flex h-[18px] w-[18px] cursor-pointer items-center justify-center rounded-full",
              "bg-neutral-700/80 backdrop-blur-md",
              "text-white/95 transition-colors",
              "hover:bg-neutral-600/85",
              "active:scale-[0.97]",
              "focus-visible:ring-2 focus-visible:ring-white/70 focus-visible:outline-none",
              "shadow-[0_1px_3px_rgba(0,0,0,0.25)]",
            )}
          >
            <X size={10} weight="bold" />
          </motion.button>
        )}
      </AnimatePresence>

      <div className="flex items-center justify-center px-3.5 pt-2.5 pb-1">
        <button
          type="button"
          onClick={() => setIsExpanded((prev) => !prev)}
          aria-expanded={isExpanded}
          className="relative cursor-pointer rounded-md px-2 py-0.5 text-[12px] font-medium tracking-tight text-black/85 transition-colors before:absolute before:inset-x-0 before:-inset-y-1.5 before:content-[''] hover:bg-black/[0.05] focus-visible:ring-2 focus-visible:ring-black/40 focus-visible:outline-none active:bg-black/[0.08]"
        >
          {selectedDevice?.label}
          {selectedDevice?.emoji ? ` ${selectedDevice.emoji}` : ""}
          <motion.span
            animate={{
              opacity: isHovering ? 1 : 0,
              rotate: isExpanded ? 180 : 0,
            }}
            transition={CHEVRON_TRANSITION}
            className="pointer-events-none absolute top-1/2 -right-2.5 inline-flex -translate-y-1/2 text-black/50"
          >
            <CaretDown size={9} weight="bold" />
          </motion.span>
        </button>
      </div>

      <div className="flex items-center gap-2.5 px-3 pb-3">
        <button
          type="button"
          onClick={handleMuteToggle}
          aria-label={isMuted ? "Unmute" : "Mute"}
          className="relative flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center text-black/65 transition-colors before:absolute before:-inset-1.5 before:content-[''] hover:text-black/90 focus-visible:ring-2 focus-visible:ring-black/40 focus-visible:outline-none active:scale-[0.97]"
        >
          <AnimatePresence mode="wait" initial={false}>
            <motion.span
              key={isMuted ? "muted" : "low"}
              initial={{ scale: 0.55, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              exit={{ scale: 0.55, opacity: 0 }}
              transition={ICON_SPRING}
              className="absolute inset-0 flex items-center justify-center"
            >
              {isMuted ? (
                <SpeakerSlash size={16} weight="fill" />
              ) : (
                <SpeakerLow size={16} weight="fill" />
              )}
            </motion.span>
          </AnimatePresence>
        </button>

        <SliderPrimitive.Root
          value={[value]}
          onValueChange={handleValueChange}
          onPointerDown={() => setIsDragging(true)}
          min={0}
          max={100}
          step={0.5}
          aria-label="Volume"
          className="relative flex h-5 flex-1 cursor-pointer touch-none select-none items-center"
        >
          <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-black/15">
            <SliderPrimitive.Range className="absolute h-full rounded-full bg-white" />
          </SliderPrimitive.Track>
          <SliderPrimitive.Thumb className="block h-4 w-5 outline-none ring-0 focus-visible:ring-2 focus-visible:ring-black/20 focus-visible:ring-offset-0">
            <motion.div
              className="h-full w-full rounded-full bg-white shadow-[0_1px_4px_rgba(0,0,0,0.24),0_0_0_0.5px_rgba(0,0,0,0.08)]"
              animate={{ scale: isDragging ? 0.92 : 1 }}
              transition={SPRING}
            />
          </SliderPrimitive.Thumb>
        </SliderPrimitive.Root>

        <button
          type="button"
          onClick={() => animateTo(100)}
          aria-label="Maximum"
          className="relative flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center text-black/65 transition-colors before:absolute before:-inset-1.5 before:content-[''] hover:text-black/90 focus-visible:ring-2 focus-visible:ring-black/40 focus-visible:outline-none active:scale-[0.97]"
        >
          <SpeakerHigh size={16} weight="fill" />
        </button>
      </div>

      <AnimatePresence initial={false}>
        {isExpanded && (
          <motion.div
            key="expanded"
            initial={{ height: 0, opacity: 0 }}
            animate={{
              height: "auto",
              opacity: 1,
              transition: layoutTransition,
            }}
            exit={{ height: 0, opacity: 0, transition: exitTransition }}
            style={{ overflow: "hidden" }}
          >
            <div className="mx-3 h-px bg-black/10" />

            <NowPlayingCard
              track={track}
              isPlaying={isPlaying}
              position={position}
              onPlayPause={handlePlayPause}
              onPrev={handlePrev}
              onNext={handleNext}
            />

            <div className="mx-3 h-px bg-black/10" />

            <div className="px-3 py-2">
              <div
                id="macos-hud-output-label"
                className="mb-1 px-1.5 text-[10px] font-semibold tracking-wider text-black/45 uppercase"
              >
                Output
              </div>
              <div
                role="radiogroup"
                aria-labelledby="macos-hud-output-label"
                onKeyDown={handleDeviceListKeyDown}
                className="flex flex-col gap-0.5"
              >
                {devices.map((device, i) => (
                  <Fragment key={device.id}>
                    <DeviceListItem
                      buttonRef={(el) => {
                        deviceItemRefs.current[i] = el;
                      }}
                      device={device}
                      isSelected={device.id === selectedDeviceId}
                      isFocused={i === focusedDeviceIndex}
                      onSelect={() => handleSelectDevice(device.id)}
                      onFocus={() => setFocusedDeviceIndex(i)}
                    />
                    {device.id === selectedDeviceId && device.batteries && (
                      <BatteryRow batteries={device.batteries} />
                    )}
                  </Fragment>
                ))}
              </div>
            </div>

            <div className="mx-3 h-px bg-black/10" />

            <div className="flex items-center justify-between px-4 py-2.5">
              <span className="text-[12px] font-medium text-black/85">
                Spatial Audio
              </span>
              <SpatialToggle
                checked={isSpatialAudio}
                onChange={handleSpatialAudio}
              />
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </motion.div>
  );
}