/* eslint-disable @typescript-eslint/no-explicit-any */
import { LoginFormAction } from "@/actions/auth/AuthActions";
import { getRooms } from "@/actions/room/RoomActions";
import RoomCard from "@/components/RoomCard";
import { Handshake } from "lucide-react";
import { cookies } from "next/headers";
import Image from "next/image";
import Link from "next/link";
import { ViewTransition } from "react";

export default async function Home() {

  const cj = await cookies()
  const session = cj.get(`ccsession`)

  const rooms = await getRooms()
  return (
    <div className="flex flex-col min-h-screen bg-black font-sans">
      <form
        className="flex flex-col lg:flex-row p-2 w-full bg-purple-900 text-white  shadow-sm shadow-purple-400 z-20"
        action={LoginFormAction}>
        <div className="grow flex">
          <Handshake size={30} className="me-2" />
          <input className=" w-full focus:p-2 transition-all" placeholder="Find" />
        </div>
        {/* <input type="email" name="email" placeholder="Email" />
        <input type="password" name="password" placeholder="Password" /> */}
        {!session &&
          <div className="flex">
            <Link className="px-2" href={`/login`}>Login</Link>
            <ViewTransition name="register-button" exit={'animate-out'}>
              <Link className="px-2" href={`/register`}>Register</Link>
            </ViewTransition>
          </div>
        }
      </form>
      <div className="grid grid-cols-1 lg:grid-cols-3 m-2">
        {rooms.map((room: {
          title: string;
          room: string;
          image: any;
          color: string;
        }, i: number) =>
          <RoomCard
            key={`Card-${i}`}
            color={room.color}
            image={room.image}
            room={room.room}
            title={room.title}
          />
        )}
      </div>
      {/* {JSON.stringify(rooms)} */}
    </div>
  );
}