import { FC } from 'react'
import { Link } from 'react-router-dom'
import { clx } from '../../helpers/utils'

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

const SubMenuItem: FC<Props> = (props: Props) => {
    return (
        <Link to={props.link} className={clx(
            'flex text-xs gap-6 mt-1',
        )}>
            <div className={clx(
                'w-1 bg-black h-6',
                !props.isActive && 'invisible',
            )}></div>
            <div className={clx(
                'flex gap-3 items-center mt-1',
            )}>
                <div className={props.isActive ? 'text-black' : 'text-description'}>
                    {props.title}
                </div>
            </div>

        </Link>
    )
}

export default SubMenuItem