import type { FC } from "react";
import { useBarItems } from "@/hooks/barItems";
import { Link } from "react-router";

const Sidebar: FC = () => {
  const [barItems, isActive] = useBarItems();

  return (
    <div className="hidden sm:flex flex-col gap-2 items-stretch border-r border-gray-300 dark:border-gray-700 min-w-80 w-80 p-5 pt-18 min-h-screen select-none">
      {barItems.map((item) => (
        <Link to={item.pathname} key={item.tab}>
          <div
            className={`dark:text-gray-200 transition-colors text-sm cursor-pointer p-4 rounded-lg flex flex-row items-center gap-3${
              isActive(item) ? " bg-gray-200 dark:bg-gray-900" : ""
            }`}
          >
            {item.icon} {item.title}
          </div>
        </Link>
      ))}
    </div>
  );
};

export default Sidebar;