"use client";

import { useState } from "react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';

export default function LoginPage() {
  const [isLogin, setIsLogin] = useState(true);

  return (
    <ThemeProvider>
      <NavbarLayoutFloatingOverlay
        navItems={[{ name: "Home", id: "/" }, { name: "Login", id: "/login" }]}
        brandName="SchoolPortal"
      />
      <div className="min-h-screen pt-24">
        <ContactSplitForm
          title={isLogin ? "Sign In to SchoolPortal" : "Create an Account"}
          description={isLogin ? "Enter your credentials to access your dashboard." : "Join our community by registering below."}
          inputs={[
            { name: "email", type: "email", placeholder: "Email Address", required: true },
            { name: "password", type: "password", placeholder: "Password", required: true },
            ...(!isLogin ? [{ name: "confirmPassword", type: "password", placeholder: "Confirm Password", required: true }] : [])
          ]}
          buttonText={isLogin ? "Sign In" : "Sign Up"}
          onSubmit={(data) => console.log("Form submitted:", data)}
        />
        <div className="text-center mt-4">
          <button onClick={() => setIsLogin(!isLogin)} className="text-blue-500 hover:underline">
            {isLogin ? "Don't have an account? Sign Up" : "Already have an account? Sign In"}
          </button>
        </div>
      </div>
    </ThemeProvider>
  );
}