import { type NextPage } from "next";
import Head from "next/head";

import { api } from "~/utils/api";
import ReactPlayer from "react-player";

const VideoList: NextPage = () => {
  const hello = api.example.hello.useQuery({ text: "from tRPC" });

  return (
    <>
      <Head>
        <title>Create T3 App</title>
        <meta name="description" content="Generated by create-t3-app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c]">
        <div className="flex min-h-[80px] w-full items-center justify-between border-b border-solid border-b-[#E7E9EB] bg-white px-6">
          <span>Screenity</span>
          <span className="cursor-pointer rounded border border-[#0000001a] px-2 py-2 text-sm text-[#292d34] hover:bg-[#fafbfc]">
            Share
          </span>
        </div>
        <div className="flex h-full w-full grow flex-col items-center justify-center gap-12 bg-[#fbfbfb] bg-red-400 px-4 py-16">
          <ReactPlayer
            controls={true}
            width="80%"
            height="100%"
            url="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4"
          />
        </div>
      </main>
    </>
  );
};

export default VideoList;
