import { useParams } from "@solidjs/router";

function Room() {
  const params = useParams();

  return (
    <>
      <div class="flex-grow flex flex-col">
        <div class="pt-2 flex items-center justify-center">
          <span class="text-xl">路墙棋</span>
        </div>
        <div class="text-center text-sm mb-4">房间号: {params.roomId}</div>

        <div class="flex flex-wrap justify-center -my-2">
          <div class="relative box-shadow w-14 h-14 rounded-full border text-center flex items-center justify-center mx-4 my-2">
            <div class="text-2xl overflow-hidden">
              player1
            </div>
            <div class="absolute whitespace-nowrap px-1 translate-x-[-50%] rounded-full text-white text-xs bg-orange-600 top-0 left-[7px]">
              房主
            </div>
            <div class="absolute whitespace-nowrap px-1 translate-x-[-50%] rounded-full text-white text-xs bg-orange-600 font-mono top-[39px] left-[46px]">
              1
            </div>
            <div class="absolute whitespace-nowrap px-1 translate-x-[-50%] rounded-full text-white text-xs bg-orange-600 top-[39px] left-[7px]">
              我
            </div>
            <button type="button" class="block absolute w-14 h-14 rounded-full" />
          </div>
          <div class="relative box-shadow w-14 h-14 rounded-full border text-center flex items-center justify-center mx-4 my-2">
            <div class="text-2xl overflow-hidden">
              player2
            </div>
            <div class="absolute whitespace-nowrap px-1 translate-x-[-50%] rounded-full text-white text-xs bg-gray-600 font-mono top-[39px] left-[46px]">
              2
            </div>
            <div class="absolute left-[3px] top-[42px] border border-black rounded-full w-2.5 h-2.5 bg-gray-500" />
            <button type="button" class="absolute rounded-full block h-6 w-6 leading-6 -top-1 left-9 bg-red-500 text-white active:bg-red-600 box-shadow">
              ✕
            </button>
          </div>
        </div>

        <div class="text-center">
          <div class="mt-8 mb-12">
            <button type="button" class="inline-block overflow-hidden whitespace-nowrap transition-colors rounded-full box-shadow h-6 leading-6 px-2 text-xs text-black/90 bg-slate-200/80 active:bg-slate-300/70">
              离开座位，观战
            </button>
          </div>
          <div class="my-8">
            <button type="button" class="inline-block overflow-hidden whitespace-nowrap transition-colors rounded-full box-shadow h-10 leading-10 px-4 text-base text-white primary">
              开始游戏
            </button>
          </div>
        </div>
      </div>
    </>
  )
}

export default Room;