import React from "react";
import { Button } from "@/components/ui/button.tsx";
import { X, Home } from "lucide-react";

interface FileManagerTab {
  id: string | number;
  title: string;
}

interface FileManagerTabList {
  tabs: FileManagerTab[];
  activeTab: string | number;
  setActiveTab: (tab: string | number) => void;
  closeTab: (tab: string | number) => void;
  onHomeClick: () => void;
}

export function FileManagerTabList({
  tabs,
  activeTab,
  setActiveTab,
  closeTab,
  onHomeClick,
}: FileManagerTabList) {
  return (
    <div className="inline-flex items-center h-full gap-2">
      <Button
        onClick={onHomeClick}
        variant="outline"
        className={`ml-1 h-8 rounded-md flex items-center !px-2 border-1 border-dark-border ${activeTab === "home" ? "!bg-dark-bg-active !text-white !border-dark-border-active !hover:bg-dark-bg-active !active:bg-dark-bg-active !focus:bg-dark-bg-active !hover:text-white !active:text-white !focus:text-white" : ""}`}
      >
        <Home className="w-4 h-4" />
      </Button>
      {tabs.map((tab) => {
        const isActive = tab.id === activeTab;
        return (
          <div
            key={tab.id}
            className="inline-flex rounded-md shadow-sm"
            role="group"
          >
            <Button
              onClick={() => setActiveTab(tab.id)}
              variant="outline"
              className={`h-8 rounded-r-none !px-2 border-1 border-dark-border ${isActive ? "!bg-dark-bg-active !text-white !border-dark-border-active !hover:bg-dark-bg-active !active:bg-dark-bg-active !focus:bg-dark-bg-active !hover:text-white !active:text-white !focus:text-white" : ""}`}
            >
              {tab.title}
            </Button>

            <Button
              onClick={() => closeTab(tab.id)}
              variant="outline"
              className="h-8 rounded-l-none p-0 !w-9 border-1 border-dark-border"
            >
              <X className="!w-4 !h-4" strokeWidth={2} />
            </Button>
          </div>
        );
      })}
    </div>
  );
}