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

import { LayoutGrid, ListOrdered, Plus, Search, Table2 } from "lucide-react";
import { Button, TextInput, Group, SegmentedControl } from "@mantine/core";

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

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

const RuleEngineToolbar = ({
  search = "",
  onSearchChange,
  searchPlaceholder = "Search…",
  showSearch = true,
  onAdd,
  addLabel = "Add",
  onManageOrder,
  viewMode,
  onViewModeChange,
}: RuleEngineToolbarProps) => (
  <Group gap="md" justify="space-between" align="center" wrap="nowrap">
    {showSearch && onSearchChange ? (
      <TextInput
        placeholder={searchPlaceholder}
        value={search}
        onChange={(e) => onSearchChange(e.currentTarget.value)}
        leftSection={<Search size={18} />}
        size="md"
        radius="lg"
        style={{ flex: 1, minWidth: 0 }}
        styles={{
          input: {
            borderColor: "var(--mantine-color-gray-3)",
          },
        }}
      />
    ) : (
      <div style={{ flex: 1 }} />
    )}

    <Group gap="md" align="center" justify="flex-end" wrap="nowrap">
      <SegmentedControl
        value={viewMode}
        onChange={(value) => onViewModeChange(value as RuleEngineViewMode)}
        size="sm"
        radius="lg"
        color="edr-green"
        data={[
          {
            value: "table",
            label: (
              <Group gap={6} justify="center" wrap="nowrap">
                <Table2 size={16} />
                <span>Table</span>
              </Group>
            ),
          },
          {
            value: "cards",
            label: (
              <Group gap={6} justify="center" wrap="nowrap">
                <LayoutGrid size={16} />
                <span>Cards</span>
              </Group>
            ),
          },
        ]}
        styles={{
          root: {
            background: "var(--mantine-color-gray-1)",
          },
        }}
      />

      {onManageOrder ? (
        <Button
          onClick={onManageOrder}
          leftSection={<ListOrdered size={18} />}
          size="sm"
          radius="lg"
          variant="light"
          color="gray"
          fw={600}
          style={{ whiteSpace: "nowrap" }}
        >
          Manage order
        </Button>
      ) : null}

      {onAdd ? (
        <Button
          onClick={onAdd}
          leftSection={<Plus size={18} />}
          size="sm"
          radius="lg"
          color="edr-green"
          variant="filled"
          fw={600}
          style={{ whiteSpace: "nowrap" }}
        >
          {addLabel}
        </Button>
      ) : null}
    </Group>
  </Group>
);

export default RuleEngineToolbar;