"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";

interface MenuItem {
    label: string;
    href: string;
    icon?: string;
}

const menuItems: MenuItem[] = [
    { label: "Дашборд", href: "/profile/dashboard" },
    { label: "Мои яхты", href: "/profile/yachts" },
    { label: "Мои брони", href: "/profile/reservations" },
    { label: "Заказы", href: "/profile/orders" },
    { label: "Календарь", href: "/profile/calendar" },
    { label: "Избранное", href: "/profile/favorites" },
    { label: "Аккаунт", href: "/profile/account" },
    { label: "Выйти", href: "/profile/logout" },
];

export default function ProfileSidebar() {
    const pathname = usePathname();

    return (
        <aside className="w-[292px] bg-white h-min rounded-[16px] flex-shrink-0 bg-[#f4f4f4]">
            <nav>
                <ul>
                    {menuItems.map((item) => {
                        const isActive = pathname === item.href || 
                            (item.href === "/profile/yachts" && pathname?.startsWith("/profile/yachts"));
                        
                        return (
                            <li key={item.href}>
                                <Link
                                    href={item.href}
                                    className={cn(
                                        "block p-6 border-b border-[#EDEDED] font-regular text-sm",
                                        isActive
                                            ? "text-[#2D908D]"
                                            : "text-[#333333]"
                                    )}
                                >
                                    {item.label}
                                </Link>
                            </li>
                        );
                    })}
                </ul>
            </nav>
        </aside>
    );
}
