"use client";
export const dynamic = "force-dynamic";
import logo from "@/public/assest/logo.svg";
import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";
import { BASE_URL } from "@/Constant";
const LoginPage = () => {
  const [websiteData, setWebsiteData] = useState<any>(null);

  useEffect(() => {
    async function fetchWebsiteData() {
      try {
        const res = await fetch(
          `${BASE_URL}website/getWebsiteById?websiteId=66e3e5bfcdfd3a17049f0279`,
          {
            next: { revalidate: 60 },
          }
        );

        console.log("Response object:", res);

        if (!res.ok) throw new Error("Failed to fetch website data");

        const json = await res.json();
        console.log("Website data received: 33333", json);

        setWebsiteData(json?.data);
      } catch (error) {
        console.error("Error fetching website data:", error);
      }
    }

    fetchWebsiteData();
  }, []);
  return (
    <div className="flex justify-center items-center">
      <div className="bg-white rounded-3xl p-11 w-[450px]">
        <div className="flex justify-center">
          {websiteData?.headerLogo ? (
            <Image
              src={`${BASE_URL}${websiteData.headerLogo}`}
              alt="IAAB Logo"
              width={135}
              height={125}
              className="w-auto h-auto max-h-32 object-contain transition-transform hover:scale-105"
              unoptimized={true}
            />
          ) : (
            <div className="w-32 h-8 bg-gray-200 animate-pulse rounded"></div>
          )}
        </div>
        <div className="text-3xl text-center my-5">Login and SignUp</div>
        <Link
          onClick={() =>
            localStorage.setItem("innermemberlogin", "association")
          }
          href="/login"
          className="block"
        >
          <div className="bg-btn p-3 w-full rounded-3xl text-black m-auto text-center my-4">
            Association
          </div>
        </Link>
        <Link
          onClick={() =>
            localStorage.setItem("innermemberlogin", "organisation")
          }
          href="/login"
          className="block"
        >
          <div className="bg-btn p-3 w-full rounded-3xl text-black m-auto text-center my-4">
            Organisation
          </div>
        </Link>
        <Link
          onClick={() =>
            localStorage.setItem("innermemberlogin", "professional")
          }
          href="/login"
          className="block"
        >
          <div className="bg-btn p-3 w-full rounded-3xl text-black m-auto text-center my-4">
            Professional
          </div>
        </Link>
      </div>
    </div>
  );
};

export default LoginPage;