edr-platform/apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineToolbar.tsx

import { Filter, LayoutGrid, Plus, Search, Table2 } from "lucide-react";

import { cn } from "@/lib/utils";
import { Button, Input } from "@edr/ui-common";

import type { RuleEngineViewMode } from "./useRuleEngineViewMode";
import { ruleEngineToolbar } from "./ruleEngineStyles";

export interface RuleEngineToolbarProps {
  search: string;
  onSearchChange: (value: string) => void;
  searchPlaceholder: string;
  onAdd: () => void;
  addLabel?: string;
  viewMode: RuleEngineViewMode;
  onViewModeChange: (mode: RuleEngineViewMode) => void;
}

const RuleEngineToolbar = ({
  search,
  onSearchChange,
  searchPlaceholder,
  onAdd,
  addLabel = "Add",
  viewMode,
  onViewModeChange,
}: RuleEngineToolbarProps) => (
  <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
    <div className="relative min-w-0 flex-1 lg:max-w-md">
      <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
      <Input
        type="search"
        value={search}
        onChange={(e) => onSearchChange(e.target.value)}
        placeholder={searchPlaceholder}
        className={ruleEngineToolbar.search}
      />
    </div>

    <div className="flex shrink-0 flex-wrap items-center gap-2">
      <div
        className={ruleEngineToolbar.viewToggleGroup}
        role="group"
        aria-label="View mode"
      >
        <button
          type="button"
          onClick={() => onViewModeChange("table")}
          className={cn(
            ruleEngineToolbar.viewToggleBtn,
            viewMode === "table"
              ? ruleEngineToolbar.viewToggleActive
              : ruleEngineToolbar.viewToggleIdle,
          )}
          aria-pressed={viewMode === "table"}
        >
          <Table2 className="h-4 w-4" />
          Table
        </button>
        <button
          type="button"
          onClick={() => onViewModeChange("cards")}
          className={cn(
            ruleEngineToolbar.viewToggleBtn,
            viewMode === "cards"
              ? ruleEngineToolbar.viewToggleActive
              : ruleEngineToolbar.viewToggleIdle,
          )}
          aria-pressed={viewMode === "cards"}
        >
          <LayoutGrid className="h-4 w-4" />
          Cards
        </button>
      </div>

      <Button
        type="button"
        variant="outline"
        className={cn(ruleEngineToolbar.actionBtn, "gap-2 px-3")}
      >
        <Filter className="h-4 w-4" />
        Filter
      </Button>
      <Button type="button" className={ruleEngineToolbar.primaryBtn} onClick={onAdd}>
        <Plus className="h-4 w-4" />
        {addLabel}
      </Button>
    </div>
  </div>
);

export default RuleEngineToolbar;