"use client";

import {NextPage} from "next";
import Link from "next/link";
import {usePathname} from "next/navigation";
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger
} from "@/components/ui/dropdown-menu";
import {Menu} from "lucide-react";
import {Button} from "@/components/ui/button";
import {NavLinkProps} from "@/components/Public/Navbar/index"
import React from "react";

export function MainNavigation({links,}: Readonly<{ links: NavLinkProps[]; }>) {
    const pathName = usePathname()

    return (
        <div className="hidden md:flex flex-row ml-auto">
            {
                links.map((link, index) => {
                    const isSelected = pathName === link.link;
                    return (
                        <Link key={index}
                              href={link.link}
                              className={`px-2 hover:underline ${isSelected ? "text-green-900 font-bold" : "font-normal"}`}>
                            {link.name}
                        </Link>
                    );
                })
            }
        </div>
    )
}


export function MobileNavigation({links,}: Readonly<{ links: NavLinkProps[]; }>) {
    return (
        <div className={"ml-auto block md:hidden"}>
            <DropdownMenu>
                <DropdownMenuTrigger asChild>
                    <Button variant={"outline"} size={"icon"}>
                        <Menu size={20}/>
                    </Button>
                </DropdownMenuTrigger>

                <DropdownMenuContent className="w-56">
                    <DropdownMenuLabel className={"text-green-900"}>Quick Menu</DropdownMenuLabel>
                    <DropdownMenuSeparator/>
                    {
                        links.map((link, index) => {
                            return (
                                <Link href={link.link} key={index}>
                                    <DropdownMenuItem>
                                        {link.name}
                                    </DropdownMenuItem>
                                </Link>
                            )
                        })
                    }
                </DropdownMenuContent>
            </DropdownMenu>
        </div>
    )
}