import { FC, ReactNode } from 'react'
import { Link, useParams } from 'react-router-dom'
import { clx } from '../helpers/utils'
import { Pages } from '../config/Pages'

type Props = {
    icon: ReactNode,
    title: string,
    isActive: boolean,
    link: string, // مقدار مثل: "dashboard" یا "wallet"
    isLogout?: boolean,
}

const SideBarItem: FC<Props> = (props: Props) => {
    const { slug } = useParams(); // دریافت slug از URL
    const fullLink = props.isLogout ? Pages.auth.login : `/${slug}/${props.link.replace(/^\//, '')}`;

    const handleLogout = () => {
        localStorage.removeItem(import.meta.env.VITE_TOKEN_NAME)
        window.location.href = Pages.auth.login
    }

    // alert(slug)

    return (
        <Link
            onClick={props.isLogout ? handleLogout : undefined}
            to={fullLink}
            className='flex text-xs gap-9 mt-4'
        >
            <div className={clx(
                'w-1 bg-black h-6',
                !props.isActive && 'invisible'
            )}></div>
            <div className='flex gap-3 items-center'>
                {props.icon}
                <div className={props.isActive ? 'text-black' : ''}>
                    {props.title}
                </div>
            </div>
        </Link>
    )
}

export default SideBarItem