import { PRIMARY_COLOR } from '@/config/const'
import { clx } from '@/helpers/utils'
import { Heart, Message, MessageText1, ShoppingCart, UserSquare } from 'iconsax-react'
import Link from 'next/link'
import { FC } from 'react'

type Props = {
    icon: 'user' | 'heart' | 'comment' | 'chat' | 'orders',
    isActive: boolean,
    text: string,
    href: string
}

const MenuItem: FC<Props> = (props) => {

    const { icon, isActive, text, href } = props

    const color = isActive ? PRIMARY_COLOR : '#7F7F7F'

    const Icon = () => {
        switch (icon) {
            case 'user':
                return <UserSquare size={20} color={color} />
            case 'heart':
                return <Heart size={20} color={color} />
            case 'comment':
                return <Message size={20} color={color} />
            case 'chat':
                return <MessageText1 size={20} color={color} />
            case 'orders':
                return <ShoppingCart size={20} color={color} />
        }
    }

    return (
        <Link href={href} className={clx(
            'h-12 sm:h-16 lg:h-20 w-fit px-2 sm:px-3 lg:px-4 border-b-2 border-primary flex items-center gap-2 sm:gap-3 lg:gap-4 whitespace-nowrap flex-shrink-0',
            isActive ? 'border-b-primary' : 'border-b-transparent'
        )}>
            <Icon />
            <div className={clx(
                'text-xs sm:text-sm',
                isActive ? 'text-primary' : 'text-[#7F7F7F]'
            )}>
                {text}
            </div>
        </Link>
    )
}

export default MenuItem