import { FC } from "react"
import { SidebarInterface } from "../../../types"
import clsx from "clsx"
import { Link, useLocation } from "react-router-dom"

type Props = {
    item: SidebarInterface
}
export const SidebarItem: FC<Props> = ({ item }) => {
    const { pathname } = useLocation()
    return (
        <Link to={item?.route} className={clsx("w-full flex flex-row gap-x-3 items-center rounded-[20px] p-3 min-w-52", {
            "bg-secondary-color": item?.route === pathname
        })}>
            {item?.route === pathname ? item?.activeIcon : item?.icon}
            <p className={clsx("font-normal text-sm text-secondary-text-color", {
                "!text-primary-text-color": item?.route === pathname
            })}>{item?.title}</p>
        </Link>
    )
}