'use client'
import { FC, useState } from 'react'
import { Profile, MessageText, ShoppingCart, HambergerMenu, Home } from 'iconsax-react'
import CategoryModal from './CategoryModal'

const MobileBottomMenu: FC = () => {
    const [isCategoryModalOpen, setIsCategoryModalOpen] = useState(false)

    const menuItems = [
        { icon: Profile, label: 'پروفایل', active: false },
        { icon: MessageText, label: 'چت', active: false },
        { icon: ShoppingCart, label: 'سبد خرید', active: false },
        { icon: HambergerMenu, label: 'منو', active: false, onClick: () => setIsCategoryModalOpen(!isCategoryModalOpen) },
        { icon: Home, label: 'خانه', active: true },
    ]

    return (
        <>
            {/* Mobile Bottom Menu */}
            <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-50 md:hidden">
                <div className="flex items-center justify-around py-3 px-2">
                    {menuItems.map((item, index) => {
                        const IconComponent = item.icon
                        return (
                            <button
                                key={index}
                                onClick={item.onClick}
                                className={`flex flex-col items-center gap-1 p-2 min-w-0 flex-1 ${item.active ? 'text-purple-600' : 'text-gray-600'
                                    }`}
                            >
                                <IconComponent
                                    size={24}
                                    color={item.active ? '#9333ea' : '#6b7280'}
                                />
                                <span className="text-xs text-center leading-tight">{item.label}</span>
                            </button>
                        )
                    })}
                </div>
            </div>

            {/* Category Modal */}
            <CategoryModal
                isOpen={isCategoryModalOpen}
                onClose={() => setIsCategoryModalOpen(false)}
            />
        </>
    )
}

export default MobileBottomMenu