import type { FC } from "react";
import { barItems } from "../tabs";

export interface ISidebarProps {
  activeTab: string;
  onChangeTab: (tab: string) => void;
}

const Sidebar: FC<ISidebarProps> = ({ activeTab, onChangeTab }) => {
  return (
    <div className="hidden sm:flex flex-col gap-2 items-stretch min-w-80 w-80 p-5 pt-18 min-h-screen select-none bg-white/65 dark:bg-black/65 shadow-lg shadow-gray-300 dark:shadow-gray-700">
      {barItems.map((item) => (
        <div
          key={item.tab}
          onClick={() => onChangeTab(item.tab)}
          className={`dark:text-gray-200 transition-colors text-md cursor-pointer p-4 rounded-lg flex flex-row items-center gap-3${
            item.tab === activeTab ? " bg-gray-200 dark:bg-gray-900" : ""
          }`}
        >
          {item.icon} {item.title}
        </div>
      ))}
    </div>
  );
};

export default Sidebar;