import React from 'react';

const TestGPT = () => {
    return (
        <div className="min-h-screen flex">
            {/* Left Pane */}
            <div className="flex-1 flex items-center justify-center bg-blue-500">
                <span className="text-white text-4xl font-bold">Branding</span>
            </div>

            {/* Right Pane */}
            <div className="flex-1 flex flex-col items-center justify-center bg-white p-10">
                <h1 className="text-2xl font-bold mb-5">Login</h1>

                {/* Username input */}
                <input 
                    type="text" 
                    placeholder="Username" 
                    className="mb-4 p-3 w-full border rounded-md"
                />

                {/* Password input */}
                <input 
                    type="password" 
                    placeholder="Password" 
                    className="mb-4 p-3 w-full border rounded-md"
                />

                {/* Login button */}
                <button className="mb-4 w-full bg-blue-500 text-white p-3 rounded-md">Login</button>

                {/* Social login options */}
                <div className="mb-4 flex justify-center space-x-3">
                    <button className="p-2 bg-red-500 text-white rounded-full">
                        G
                    </button>
                    <button className="p-2 bg-blue-600 text-white rounded-full">
                        F
                    </button>
                </div>

                {/* Forgot password and sign up */}
                <div className="flex justify-between w-full">
                    <a href="#" className="text-blue-500">Forgot Password?</a>
                    <a href="#" className="text-blue-500">Sign Up</a>
                </div>
            </div>
        </div>
    );
};

export default () =>  <> <Nav /> </>;


const Nav = () => {
    return (
        <div className="w-60 h-full bg-blue-600 rounded-2xl p-4">
  {/* Profile Section */}
  <div className="flex items-center mb-6">
    <img className="w-8 h-8 rounded-sm" src="https://via.placeholder.com/32x32" />
    <div className="ml-3 text-white text-base font-medium">Justine Gagnon</div>
  </div>

  {/* Menu Items */}
  <div className="space-y-4 flex flex-col">
    {/* Each menu item can be a component, e.g., <MenuItem icon={...} title="Notifications" /> */}
    <div className="flex items-center space-x-4">
      <div className="bg-red-500 w-4 h-4 rounded-full"></div>
      <div className="text-white">Notifications</div>
    </div>
    {/* ... Other menu items ... */}

    {/* Submenu for Horaire en cours */}
    <div className="flex flex-col space-y-2">
      <div className="text-white">Horaire en cours</div>
      <div className="ml-4 text-white">Mon horaire</div>
      <div className="ml-4 text-white">Horaire d’unité</div>
      {/* ... Other submenu items ... */}
    </div>
    {/* ... Other submenus ... */}
  </div>

  {/* Logout Button at the bottom */}
  <div className="mt-auto flex items-center space-x-4">
    {/* Logout icon can be added here */}
    <div className="text-white">Déconnection</div>
  </div>
</div>

    )
}

const ProfileComponent = () => {
    return (
        <div className="flex bg-white w-full min-h-screen">
            <Sidebar />
            <div className="flex flex-col w-full p-12">
                <Header />
                <DetailsSection />
                <ContactSection />
            </div>
        </div>
    );
};

const Sidebar = () => {
    return (
        <aside className="bg-blue-600 w-60 min-h-screen p-4">
            {/* Sidebar Content */}
            <div className="mb-4">
                <img src="https://via.placeholder.com/32x32" alt="Profile Logo" className="w-8 h-8 rounded-full"/>
                <h3 className="text-white mt-2">Justine Gagnon</h3>
            </div>
            <nav>
                {/* Add nav links here */}
            </nav>
        </aside>
    );
};

const Header = () => {
    return (
        <header className="flex items-center justify-between mb-8">
            <h1 className="text-4xl">Justine Gagnon</h1>
            <img src="https://via.placeholder.com/124x124" alt="Profile Picture" className="w-32 h-32 rounded-sm"/>
        </header>
    );
};

const DetailsSection = () => {
    return (
        <section className="mb-8 bg-white rounded p-4 shadow">
            {/* Professional Details */}
            <h2 className="text-2xl mb-4">Détails professionnels</h2>
            {/*... Remaining Details ...*/}
        </section>
    );
};

const ContactSection = () => {
    return (
        <section className="bg-white rounded p-4 shadow">
            {/* Contact Details */}
            <h2 className="text-2xl mb-4">Mes coordonnées</h2>
            {/*... Remaining Contact Info ...*/}
        </section>
    );
};



