'use client';

import React from 'react';
import { useSelectedLayoutSegment } from 'next/navigation';
import { Link } from '../../navigation';

export const AccountMenu = ({ userId, menu }: { userId: string, menu: { path: string, title: string, count?: number }[] }) => {
    const selectedLayoutSegment = useSelectedLayoutSegment();
    const pathname = selectedLayoutSegment || '';

    return (
        <ul className="list-sidebar">
            {menu.map(({ path, title, count }) => (
                <li key={path} className="list-sidebar__item">
                    <Link href={`/${userId}/${path}` as any} className={path === pathname ? 'active' : ''}>
                        {title}
                        {count ? (
                            <span className="count">{count}</span>
                        ) : null}
                    </Link>
                </li>
            ))}
            <li className="list-sidebar__item">
                <a href="#" className="">Log Out</a>
            </li>
        </ul>
    )
};