'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { useTranslation } from 'react-i18next'

interface MenuItem {
    key: string
    label: string
    href: string
    isActive?: boolean
    subItems?: Array<{
        key: string
        label: string
        href: string
    }>
}

export default function ProfileSidebar() {
    const { t } = useTranslation()
    const pathname = usePathname()

    const menuItems: MenuItem[] = [
        {
            key: 'personalInfo',
            label: t('profile.sidebar.personalInfo'),
            href: '/my/profile',
            isActive: pathname === '/my/profile' || pathname === '/my/connection',
            subItems: [
                {
                    key: 'userInfo',
                    label: t('profile.sidebar.userInfo'),
                    href: '/my/profile',
                },
                {
                    key: 'accountConnection',
                    label: t('profile.sidebar.accountConnection'),
                    href: '/my/connection',
                },
            ],
        },
        {
            key: 'loginInfo',
            label: t('profile.sidebar.loginInfo'),
            href: '/my/login/logs',
            isActive: pathname.startsWith('/my/login'),
        },
        {
            key: 'notifications',
            label: t('profile.sidebar.notifications'),
            href: '/my/notifications',
            isActive: pathname === '/my/notifications',
        },
        {
            key: 'hiddenStreamers',
            label: t('profile.sidebar.hiddenStreamers'),
            href: '/my/blocks',
            isActive: pathname === '/my/blocks',
        },
    ]

    return (
        <div className="border-b border-gray-200 dark:border-gray-700">
            <h3 className="text-2xl font-semibold mb-4">
                {t('profile.sidebar.personalInfo')}
            </h3>
            <div className="flex flex-nowrap gap-x-4 gap-y-2 min-w-max">
                {menuItems.map((item) => (
                    <div key={item.key} className="relative">
                        <Link
                            href={item.href}
                            className={`block h-8 px-1 border-b-2 transition-colors ${item.isActive
                                ? 'border-black text-black font-semibold dark:border-white dark:text-white'
                                : 'border-transparent text-gray-600 dark:text-gray-400 hover:text-black hover:border-black dark:hover:text-white dark:hover:border-white'
                                }`}
                        >
                            {item.label}
                        </Link>
                    </div>
                ))}
            </div>
        </div>
    )
}