"use client";

import {
  Sidebar,
  SidebarItem,
  SidebarItemGroup,
  SidebarItems,
} from "flowbite-react";
import { FC, useState } from "react";
import { BsExposure } from "react-icons/bs";
import { twMerge } from "tailwind-merge";

type props = {
  onComponentSelect: (x: any) => void;
};

export const ReportMenus: FC<props> = ({ onComponentSelect }) => {
  const [currentComponent, setCurrentComponent] = useState("IncomeExpense");
  const components = [
    { name: "Income & Expense", id: "IncomeExpense", icon: <BsExposure /> },
    // { name: "Invoice", id: "InvoiceReport", icon: <BsIncognito /> },
    // { name: "Expense", id: "ExpenseReport", icon: <BsExposure /> },
  ];

  return (
    <Sidebar
      aria-label="Default sidebar example"
      theme={{
        root: { inner: "" },
      }}
    >
      <SidebarItems>
        <SidebarItemGroup>
          {components.map((comp) => (
            <SidebarItem
              className={twMerge(
                "cursor-pointer",
                comp.id === currentComponent && "bg-gray-100"
              )}
              key={comp.id}
              onClick={() => {
                onComponentSelect(comp.id);
                setCurrentComponent(comp.id);
              }}
            >
              <div className="flex gap-2">
                <div className="mt-1">{comp.icon}</div>
                <div>{comp.name}</div>
              </div>
            </SidebarItem>
          ))}
          {/* <SidebarItem
            href="#"
            icon={HiViewBoards}
            label="Pro"
            labelColor="dark"
          >
            Kanban
          </SidebarItem> */}
        </SidebarItemGroup>
      </SidebarItems>
    </Sidebar>
  );
};