"use client";

import * as Icons from "@/components/shared/ui-icons";
import { X } from "@/components/shared/ui-icons";
import type { LucideProps } from "@/components/shared/ui-icons";
import type { AccessTab } from "@/types/rolesAccess";

export function RolesAccessTabs({ tabs, activeTabId, onActivate, onClose }: { tabs: AccessTab[]; activeTabId: string | null; onActivate: (id: string) => void; onClose: (id: string) => void }) {
  if (!tabs.length) return null;
  return (
    <div className="flex gap-1 overflow-x-auto border-b border-white/10 px-4 pt-3 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
      {tabs.map((tab) => {
        const Icon = tab.icon ? (Icons as unknown as Record<string, React.ComponentType<LucideProps>>)[tab.icon] ?? Icons.Folder : Icons.Folder;
        const active = tab.id === activeTabId;
        return (
          <button key={tab.id} onClick={() => onActivate(tab.id)} className={`flex min-w-36 items-center gap-2 rounded-t-2xl px-3 py-2 text-sm transition ${active ? "bg-white/25 font-black" : "bg-white/10 hover:bg-white/15"}`}>
            <Icon className="h-4 w-4" />
            <span className="truncate">{tab.titleFa}</span>
            {tab.isClosable ? <span onClick={(event) => { event.stopPropagation(); onClose(tab.id); }} className="rounded-full p-1 hover:bg-white/20"><X className="h-3.5 w-3.5" /></span> : null}
          </button>
        );
      })}
    </div>
  );
}