import { FC } from 'react'
import MenuItem from './MenuItem'
import { Button } from '@/components/ui/button'
import { LogoutCurve } from 'iconsax-react'

type Props = {
    pageActive: 'profile' | 'favorite' | 'comments' | 'chat' | 'orders'
}

const Menu: FC<Props> = (props) => {
    const { pageActive } = props

    return (
        <div className='bg-[#FAFAFA] rounded-[10px] border border-border'>
            {/* Mobile Layout */}
            <div className='block sm:hidden'>
                <div className='flex overflow-x-auto scrollbar-hide p-3'>
                    <div className='flex gap-2 min-w-max'>
                        <MenuItem href='/profile' icon='user' text='پروفایل کاربری' isActive={pageActive === 'profile'} />
                        <MenuItem href='/profile/favorite' icon='heart' text='علاقه مندی ها' isActive={pageActive === 'favorite'} />
                        <MenuItem href='/profile/comments' icon='comment' text='نظرات من' isActive={pageActive === 'comments'} />
                        {/* <MenuItem href='/profile/chat' icon='chat' text='گفتگو' isActive={pageActive === 'chat'} /> */}
                        <MenuItem href='/profile/orders' icon='orders' text='سفارشات' isActive={pageActive === 'orders'} />

                        {/* Logout Button in Mobile */}
                        <div className='flex-shrink-0 ml-2'>
                            <Button className='bg-[#F2F2F2] h-12 px-3'>
                                <div className='flex items-center gap-2 text-[#AD3434]'>
                                    <LogoutCurve className='size-4' color='#AD3434' />
                                    <div className='text-xs font-light'>خروج</div>
                                </div>
                            </Button>
                        </div>
                    </div>
                </div>
            </div>

            {/* Desktop Layout */}
            <div className='hidden sm:flex h-20 justify-between items-center px-6 lg:px-10'>
                <div className='flex gap-4 lg:gap-6 xl:gap-10'>
                    <MenuItem href='/profile' icon='user' text='پروفایل کاربری' isActive={pageActive === 'profile'} />
                    <MenuItem href='/profile/favorite' icon='heart' text='علاقه مندی ها' isActive={pageActive === 'favorite'} />
                    <MenuItem href='/profile/comments' icon='comment' text='نظرات من' isActive={pageActive === 'comments'} />
                    {/* <MenuItem href='/profile/chat' icon='chat' text='گفتگو' isActive={pageActive === 'chat'} /> */}
                    <MenuItem href='/profile/orders' icon='orders' text='سفارشات' isActive={pageActive === 'orders'} />
                </div>

                <Button className='bg-[#F2F2F2] h-12'>
                    <div className='flex items-center gap-2 text-[#AD3434]'>
                        <LogoutCurve className='size-5' color='#AD3434' />
                        <div className='text-sm font-light'>خروج از حساب</div>
                    </div>
                </Button>
            </div>
        </div>
    )
}

export default Menu