import { getToken } from "@/lib/actions/token";
import Controls from "./controls";
import Danmu from "./danmu";
import { listLives } from "@/lib/actions/live";
import { listSongs } from "../songs/actions";
import DanmuProvider from "./provider";
import LiveCheck from "./live-check";
import SongCheck from "./song-check";
import CurrentInput from "./current-input";

export default async function Page() {
  const token = await getToken();
  const lives = await listLives();
  const songs = await listSongs();
  return (
    <div className="flex flex-col md:flex-row">
      <DanmuProvider>
        <section className="basis-1/3 card">
          <div className="h-[50vh] md:h-[80vh] overflow-auto card bg-base-100 card-bordered  m-8">
            <div className="card-body">
              <div className="card-title">直播间列表</div>
              <LiveCheck lives={lives} />
            </div>
          </div>
        </section>
        <section className="basis-1/3 card">
          <div className="h-[50vh] md:h-[80vh] overflow-auto card bg-base-100 card-bordered  m-8">
            <div className="card-body">
              <div className="card-title">收藏的歌曲</div>
              <SongCheck songs={songs} />
            </div>
          </div>
        </section>
        <section className="basis-1/3 card">
          <div className="card-body">
            <div className="mockup-browser border">
              <div className="mockup-browser-toolbar">
                <CurrentInput />
              </div>
              <div className="divide-y divide-gray-300">
                <Controls />
                <Danmu token={token} />
              </div>
            </div>
          </div>
        </section>
      </DanmuProvider>
    </div>
  );
}