Mute Control

import {
  SpeakerHighIcon,
  SpeakerLowIcon,
  SpeakerXIcon,
} from "@phosphor-icons/react"

import { Button } from "@/components/ui/button"
import { useVolumeStore } from "@/hooks/limeplay/use-volume"
import { MuteControl } from "@/components/limeplay/mute-control"

export function MuteButton() {
  const muted = useVolumeStore((s) => s.muted)
  const level = useVolumeStore((s) => s.level)

  return (
    <MuteControl asChild>
      <Button variant="ghost" size="icon">
        {muted || level === 0 ? (
          <SpeakerXIcon size={18} weight="fill" />
        ) : level < 0.5 ? (
          <SpeakerLowIcon size={18} weight="fill" />
        ) : (
          <SpeakerHighIcon size={18} weight="fill" />
        )}
      </Button>
    </MuteControl>
  )
}