"use client";
export const dynamic = "force-dynamic";
import { useEffect, useState } from "react";
import Image from "next/image";
import { useRouter } from "next/navigation";

// Import assets
import eyeclose from "@/public/assest/eye-close.svg";
import mail from "@/public/assest/mail.svg";
import user from "@/public/assest/user.svg";
import phone from "@/public/assest/phone.svg";

const RegisterPage = () => {
  const router = useRouter();
  const [logType, setLogType] = useState<string | null>(null);
  const [innerType, setInnerType] = useState<string | null>(null);

  // Fetch from localStorage only on client side
  useEffect(() => {
    setLogType(localStorage.getItem("loginType"));
    setInnerType(localStorage.getItem("innermemberlogin"));
  }, []);

  return (
    <div className="flex justify-center items-center m-11 ">
      <div className="bg-white rounded-3xl p-11 w-[550px] ">
        <div className="flex justify-center">
          <Image
            src="/assest/logo.svg"
            alt="Logo"
            width={135}
            height={125}
            unoptimized={true}
          />
        </div>
        <div className="text-2xl text-center my-5">
          Create{" "}
          {logType
            ? logType === "ab"
              ? "AB"
              : logType === "cb"
              ? "CB"
              : `Member(${innerType})`
            : "Account"}{" "}
        </div>
        <div className="text-center font-normal">
          Please enter your credentials to continue
        </div>

        {/* Input Fields */}
        {[
          { label: "Fullname", icon: user, type: "text" },
          { label: "Email", icon: mail, type: "email" },
          { label: "Phone", icon: phone, type: "text" },
          { label: "Password", icon: eyeclose, type: "password" },
        ].map(({ label, icon, type }, index) => (
          <div className="my-4" key={index}>
            <label className="text-sm">{label}</label>
            <div className="border border-gray-300 rounded-xl flex items-center justify-between p-2 px-4">
              <input type={type} className="outline-none w-full" />
              <Image src={icon} alt={label} unoptimized={true} />
            </div>
          </div>
        ))}

        <button className="bg-btn p-2 w-full rounded-3xl text-black font-bold my-4">
          Create Account
        </button>
        <div className="text-center">
          Already have an account?{" "}
          <span
            className="text-blue cursor-pointer"
            onClick={() => router.push("/login&signup")}
          >
            Log In
          </span>
        </div>
      </div>
    </div>
  );
};

export default RegisterPage;