import { CloseOutlined } from "@ant-design/icons";
import { useAppDispatch, useAppSelector } from "@/store";
import { closeTab, setActiveTab } from "@/store/tabsSlice";

export default function TabStrip() {
  const tabs = useAppSelector((s) => s.tabs.tabs);
  const activeTabId = useAppSelector((s) => s.tabs.activeTabId);
  const dispatch = useAppDispatch();

  return (
    <div className="tab-strip">
      {tabs.map((t) => {
        const active = t.id === activeTabId;
        return (
          <div
            key={t.id}
            className={`tab-item ${active ? "active" : ""}`}
            onClick={() => dispatch(setActiveTab(t.id))}
          >
            <span style={{ overflow: "hidden", textOverflow: "ellipsis", maxWidth: 220, whiteSpace: "nowrap" }}>
              {t.label}
            </span>
            {t.closable !== false && (
              <span
                className="close"
                onClick={(e) => {
                  e.stopPropagation();
                  dispatch(closeTab(t.id));
                }}
              >
                <CloseOutlined style={{ fontSize: 10 }} />
              </span>
            )}
          </div>
        );
      })}
    </div>
  );
}