'use client'
import { FC, ReactNode } from 'react'
import Link from 'next/link'
import { useSharedStore } from '@/share/store/sharedStore'

interface MenuItemProps {
    icon: ReactNode
    title: string
    href: string
    requiresLogin?: boolean
    className?: string
    onClick?: () => void
}

const MenuItem: FC<MenuItemProps> = ({
    icon,
    title,
    href,
    requiresLogin = false,
    className = '',
    onClick
}) => {
    const { isLogin } = useSharedStore()

    const handleClick = () => {
        if (onClick) {
            onClick()
        }
    }

    const content = (
        <div
            className={`flex items-center gap-2.5 cursor-pointer transition-colors hover:text-primary ${className}`}
            onClick={handleClick}
        >
            <div className="text-[#333333] group-hover:text-primary transition-colors">
                {icon}
            </div>
            <div className="text-[#333333] group-hover:text-primary transition-colors">
                {title}
            </div>
        </div>
    )

    // اگر نیاز به لاگین دارد و کاربر لاگین نیست، لینک را غیرفعال می‌کنیم
    if (requiresLogin && !isLogin) {
        return (
            <div className="opacity-50 cursor-not-allowed">
                {content}
            </div>
        )
    }

    return (
        <Link href={href} className="group">
            {content}
        </Link>
    )
}

export default MenuItem
