import { FC, ReactNode } from 'react'
import { Link } from 'react-router-dom'
import { clx } from '../helpers/utils'
import { removeRefreshToken, removeToken } from '@/config/func'
import { Paths } from '@/utils/Paths'


type Props = {
    icon: ReactNode,
    title: string,
    isActive: boolean,
    link: string,
    isLogout?: boolean,
    isWithoutLine?: boolean,
    count?: number
}

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

    const handleLogout = () => {
        removeToken()
        removeRefreshToken()
        window.location.href = Paths.login
    }

    return (
        <Link onClickCapture={props.isLogout ? handleLogout : undefined} to={props.link} className='flex text-xs gap-9 mt-4' onClick={props.isLogout ? handleLogout : undefined}>
            {
                !props.isWithoutLine &&
                <div className={clx(
                    'w-1 bg-black h-6',
                    !props.isActive && 'invisible'
                )}></div>
            }
            <div className='flex flex-1 gap-3 items-center'>
                {props.icon}
                <div className={props.isActive || !!props.count ? 'text-black' : ''}>
                    {props.title}
                </div>
                <div className='flex flex-1 justify-end pl-6'>
                    {!!props.count && <div className='h-[18px] w-fit rounded-[6px] bg-black text-white text-xs flex items-center justify-center px-2.5 pt-0.5'>
                        {props.count > 100 ? '+100' : props.count}
                    </div>}
                </div>
            </div>

        </Link>
    )
}

export default SideBarItem