import type { FC, ReactNode } from 'react'
import { Link } from 'react-router-dom'
import { clx } from '../helpers/utils'
import { Paths } from '../config/Paths'
// import { useLogout } from '../pages/auth/hooks/useAuthData'
import { removeToken } from '../config/func'
import { removeRefreshToken } from '../config/func'

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

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

    // const logout = useLogout()

    const handleLogout = async () => {
        // await logout.mutateAsync()
        removeToken()
        removeRefreshToken()
        window.location.href = Paths.auth.login
    }

    return (
        <Link onClick={props.isLogout ? handleLogout : undefined} to={props.link} className={clx(
            'h-12 rounded-2xl flex gap-2 text-[#4F5260] px-4 text-[13px] items-center',
            props.isActive && 'bg-[#F5F7FC]',
        )}>
            <div className='flex gap-3 items-center'>
                {props.icon}
                <div className={`text-[#4F5260]`}>
                    {props.title}
                </div>
            </div>

        </Link>
    )
}

export default SideBarItem