"use client";

import { useContext } from "react";
import { DanmuContext } from "./provider";

export default function SongCheck({ songs }: { songs: any[] }) {
  const { dispatch, ...state } = useContext(DanmuContext);
  return (
    <ul className="divide-y divide-gray-300">
      {songs.map((song, i) => (
        <li key={i}>
          <label>
            {song.name} - {song.artist}
            <input
              onChange={(e) => {
                dispatch({
                  type: "songs",
                  payload: {
                    songId: song.source_id,
                    songName: song.name,
                    songArtist: song.artist,
                  },
                });
              }}
              className="raido radio-primary"
              type="radio"
              name="songs"
              checked={song.source_id === state.songId}
            />
          </label>
        </li>
      ))}
    </ul>
  );
}
