import logo from '@/assets/logo.png';
import { Button } from '@/components/ui/button';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuGroup,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuPortal,
    DropdownMenuSeparator,
    DropdownMenuShortcut,
    DropdownMenuSub,
    DropdownMenuSubContent,
    DropdownMenuSubTrigger,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { home } from '@/routes';
import { ArrowDown01Icon, Layers01Icon } from '@hugeicons/core-free-icons';
import { HugeiconsIcon } from '@hugeicons/react';
import { Link } from '@inertiajs/react';

export default function Navbar() {
    return (
        <>
            <div className="mt-6 flex max-w-screen-2xl items-center justify-center">
                <nav className="flex w-full max-w-7xl items-center justify-between rounded-3xl border border-gray-300/60 px-6 py-3 shadow-lg inset-shadow-[0_-0.2rem_0.15rem_0rem_rgba(51,_51,_51,_0.09)] shadow-gray-200/50">
                    <Link href={home()}>
                        <img
                            src={logo}
                            className="aspect-square w-12"
                            alt="COL Thinkspace logo"
                        />
                    </Link>
                    <ul className="flex items-center gap-6 text-sm font-medium">
                        <li>
                            <Link>Home</Link>
                        </li>
                        <li>
                            <Link>About Us</Link>
                        </li>
                        <li>
                            <Link>Business Card</Link>
                        </li>
                        <li>
                            <Link>Business Sandbox</Link>
                        </li>
                        <li>
                            <Link>Contact Us</Link>
                        </li>
                    </ul>
                    <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                            <Button
                                variant="outline"
                                className="flex cursor-pointer items-center gap-2 font-medium tracking-tight inset-shadow-[0_-0.12rem_0.05rem_0rem_rgba(242,_242,_242,_1)]"
                            >
                                <HugeiconsIcon
                                    icon={Layers01Icon}
                                    size={24}
                                    color="currentColor"
                                    strokeWidth={1.5}
                                />
                                Products
                                <HugeiconsIcon
                                    icon={ArrowDown01Icon}
                                    size={24}
                                    color="currentColor"
                                    strokeWidth={1.5}
                                />
                            </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent className="w-56" align="end">
                            <DropdownMenuLabel>My Account</DropdownMenuLabel>
                            <DropdownMenuGroup>
                                <DropdownMenuItem>
                                    Profile
                                    <DropdownMenuShortcut>
                                        ⇧⌘P
                                    </DropdownMenuShortcut>
                                </DropdownMenuItem>
                                <DropdownMenuItem>
                                    Billing
                                    <DropdownMenuShortcut>
                                        ⌘B
                                    </DropdownMenuShortcut>
                                </DropdownMenuItem>
                                <DropdownMenuItem>
                                    Settings
                                    <DropdownMenuShortcut>
                                        ⌘S
                                    </DropdownMenuShortcut>
                                </DropdownMenuItem>
                                <DropdownMenuItem>
                                    Keyboard shortcuts
                                    <DropdownMenuShortcut>
                                        ⌘K
                                    </DropdownMenuShortcut>
                                </DropdownMenuItem>
                            </DropdownMenuGroup>
                            <DropdownMenuSeparator />
                            <DropdownMenuGroup>
                                <DropdownMenuItem>Team</DropdownMenuItem>
                                <DropdownMenuSub>
                                    <DropdownMenuSubTrigger>
                                        Invite users
                                    </DropdownMenuSubTrigger>
                                    <DropdownMenuPortal>
                                        <DropdownMenuSubContent>
                                            <DropdownMenuItem>
                                                Email
                                            </DropdownMenuItem>
                                            <DropdownMenuItem>
                                                Message
                                            </DropdownMenuItem>
                                            <DropdownMenuSeparator />
                                            <DropdownMenuItem>
                                                More...
                                            </DropdownMenuItem>
                                        </DropdownMenuSubContent>
                                    </DropdownMenuPortal>
                                </DropdownMenuSub>
                                <DropdownMenuItem>
                                    New Team
                                    <DropdownMenuShortcut>
                                        ⌘+T
                                    </DropdownMenuShortcut>
                                </DropdownMenuItem>
                            </DropdownMenuGroup>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem>GitHub</DropdownMenuItem>
                            <DropdownMenuItem>Support</DropdownMenuItem>
                            <DropdownMenuItem disabled>API</DropdownMenuItem>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem>
                                Log out
                                <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
                            </DropdownMenuItem>
                        </DropdownMenuContent>
                    </DropdownMenu>
                </nav>
            </div>
        </>
    );
}