Play Pause Button

"use client";

import { newEvent } from "@/lib/newEvent";
import { PauseCircleIcon, PlayCircleIcon } from "@/registry/react/Icons";
import { usePlayer, usePlayerSelector } from "@/registry/react/PlayerProvider";

export function PlayPauseButton() {
  const player = usePlayer();
  const playbackState = usePlayerSelector((p) => p.playbackState);
  const isPlaying = playbackState === "playing";
  return (
    <button
      type="button"
      aria-label={isPlaying ? "Pause audio" : "Play audio"}
      onClick={() => {
        const name = isPlaying ? "Pause" : "Play";
        player.onEvent(
          newEvent({
            type: `Pressed${name}`,
            description: `The ${name.toLowerCase()} button was pressed.`,
          }),
        );
      }}
    >
      {isPlaying ? <PauseCircleIcon size={40} /> : <PlayCircleIcon size={40} />}
    </button>
  );
}