import { Plus } from "lucide-react";
import { Button } from "@/components/ui/button";
import { ViewModeToggle } from "@/components/settings/assets/ViewModeToggle";
import { GroupBySelector } from "@/components/settings/assets/GroupBySelector";
import { PRIMARY_COLOR } from "@/lib/common";
import type { TabType, ViewMode, KanbanGroupBy } from "@/types/asset-settings";

export interface AssetSettingsActionsProps {
  activeTab: TabType;
  hasData: boolean;
  viewMode: ViewMode;
  onViewModeChange: (mode: ViewMode) => void;
  kanbanGroupBy: KanbanGroupBy;
  onKanbanGroupByChange: (groupBy: KanbanGroupBy) => void;
  onCreateGroup: () => void;
}

export function AssetSettingsActions({
  activeTab,
  hasData,
  viewMode,
  onViewModeChange,
  kanbanGroupBy,
  onKanbanGroupByChange,
  onCreateGroup,
}: AssetSettingsActionsProps) {
  if (!hasData || (activeTab !== "grouping" && activeTab !== "bridge")) {
    return null;
  }

  return (
    <div className="flex gap-2">
      {activeTab === "grouping" && (
        <Button
          onClick={onCreateGroup}
          className="text-white"
          style={{ backgroundColor: PRIMARY_COLOR }}
        >
          <Plus className="h-4 w-4" />
          Create Group
        </Button>
      )}
      <ViewModeToggle viewMode={viewMode} onViewModeChange={onViewModeChange} />
      {activeTab === "bridge" && (
        <GroupBySelector value={kanbanGroupBy} onChange={onKanbanGroupByChange} />
      )}
    </div>
  );
}