import { VStack } from "@chakra-ui/react";
import SidebarItem from "./SidebarItem";
import { BsChatText } from "react-icons/bs";
import { FiImage } from "react-icons/fi";
import { CiVideoOn } from "react-icons/ci";

export default function SidebarList({ filters, setFilters }) {
  return (
    <VStack align="stretch" spacing={2}>
      {filters?.tab === 0 && (
        <>
          <SidebarItem
            icon={BsChatText}
            label="LLM Base"
            name={"gemma_base"}
            active={filters?.tab_menu == "gemma_base" ? true : false}
            filters={filters}
            setFilters={setFilters}
          />
          <SidebarItem
            icon={BsChatText}
            label="LLM + LoRA"
            name={"gemma4b_lora"}
            active={filters?.tab_menu == "gemma4b_lora" ? true : false}
            filters={filters}
            setFilters={setFilters}
          />
        </>
      )}
      {filters?.tab === 1 && (
        <>
          <SidebarItem
            icon={FiImage}
            label="SDXL Base"
            name={"sdxl"}
            active={filters?.tab_menu == "sdxl" ? true : false}
            filters={filters}
            setFilters={setFilters}
          />
          <SidebarItem
            icon={FiImage}
            label="SDXL + LoRA"
            name={"sdxl_lora"}
            active={filters?.tab_menu == "sdxl_lora" ? true : false}
            filters={filters}
            setFilters={setFilters}
          />
        </>
      )}
      {filters?.tab === 2 && (
        <>
          <SidebarItem
            icon={CiVideoOn}
            label="CogVideo Base"
            name={"cogvideo_base"}
            active={filters?.tab_menu == "cogvideo_base" ? true : false}
            filters={filters}
            setFilters={setFilters}
          />
          <SidebarItem
            icon={CiVideoOn}
            label="CogVideo + LoRA"
            name={"cogvideo"}
            active={filters?.tab_menu == "cogvideo" ? true : false}
            filters={filters}
            setFilters={setFilters}
          />
        </>
      )}
    </VStack>
  );
}