import { PropsWithChildren, useState } from 'react';
import ApplicationLogo from '@/Components/ApplicationLogo';
import Footer from '@/Components/Footer';
import Dropdown from '@/Components/Dropdown';
import NavLink from '@/Components/NavLink';
import { Link, usePage } from '@inertiajs/react';
import { User } from '@/types';
import { ChevronDown } from 'react-feather';

export default function Authenticated({ user, children }: PropsWithChildren<{ user: User }>) {
    const { url } = usePage();
    const [isHiglighted, setIsHiglighted] = useState(false);

    return (
        <div>
            <header className="navbar px-4 bg-primary-background border-b-2 border-secondary-main">
                <div id="ProjectTitle" className="navbar-start">
                    <Link href="/dashboard">
                        <ApplicationLogo />
                    </Link>
                </div>

                <nav className="navbar-end">
                    <ul className="menu menu-horizontal px-1">
                        <li><NavLink href="/dashboard" active={url === '/dashboard'}>
                            Home
                        </NavLink></li>
                        <li><NavLink href="/about" active={url === '/about'}>
                            About
                        </NavLink></li>
                        <li><NavLink href="/help" active={url === '/help'}>
                            Tutorials
                        </NavLink></li>

                        <li><Dropdown>
                            <Dropdown.Trigger>
                                <button className="flex items-center py-1 px-2"
                                onMouseEnter={() => setIsHiglighted(true)}
                                onMouseDown={() => setIsHiglighted(true)}
                                onMouseLeave={() => setIsHiglighted(false)}>
                                    <span className="font-semibold text-base leading-6 mr-4">
                                        {user.name}
                                    </span>
                                    <ChevronDown stroke={isHiglighted ? "#FFFFFF" : "#000000"} />
                                </button>
                            </Dropdown.Trigger>
                            <Dropdown.Content>
                                <Dropdown.Link href={route('profile.edit')}>Profile</Dropdown.Link>
                                <Dropdown.Link href={route('logout')} method="post" as="button">
                                    Log Out
                                </Dropdown.Link>
                            </Dropdown.Content>
                        </Dropdown></li>
                    </ul>
                </nav>
            </header>

            <main>
                {children}
            </main>

            <footer>
                <Footer />
            </footer>
        </div>
    );
}