Playlist

"use client";

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

export function Playlist() {
  const player = usePlayer();
  const content = usePlayerSelector((p) => p.content);
  const contentIndex = usePlayerSelector((p) => p.contentIndex);
  return (
    <ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
      {content.map((item, index) => (
        <li key={index}>
          <button
            type="button"
            aria-current={contentIndex === index}
            aria-label={`Play ${item.title}`}
            style={{ display: "flex", alignItems: "center", gap: "0.5rem", width: "100%" }}
            onClick={() => {
              player.onEvent(
                newEvent({
                  type: "PressedPlaylistItem",
                  description: "A playlist item was pressed.",
                  index,
                }),
              );
            }}
          >
            <span style={{ display: "inline-flex", width: "1rem", justifyContent: "center" }}>
              {contentIndex === index ? <NowPlayingMarkerIcon size={16} /> : index + 1}
            </span>
            <span>{item.title}</span>
          </button>
        </li>
      ))}
    </ul>
  );
}