Nexus/apps/web/src/components/timeline/FloatingActionBar.tsx

"use client";

import React from "react";
import { clsx } from "clsx";

interface FloatingActionBarProps {
  selectedAllocationCount: number;
  selectedResourceCount: number;
  onDelete: () => void;
  onAssign: () => void;
  onClear: () => void;
  isDeleting: boolean;
}

export function FloatingActionBar({
  selectedAllocationCount,
  selectedResourceCount,
  onDelete,
  onAssign,
  onClear,
  isDeleting,
}: FloatingActionBarProps) {
  const totalCount = selectedAllocationCount + selectedResourceCount;
  if (totalCount === 0) return null;

  const label =
    selectedAllocationCount > 0 && selectedResourceCount > 0
      ? `${selectedAllocationCount} allocation${selectedAllocationCount !== 1 ? "s" : ""} + ${selectedResourceCount} resource${selectedResourceCount !== 1 ? "s" : ""} selected`
      : selectedAllocationCount > 0
        ? `${selectedAllocationCount} allocation${selectedAllocationCount !== 1 ? "s" : ""} selected`
        : `${selectedResourceCount} resource${selectedResourceCount !== 1 ? "s" : ""} selected`;

  return (
    <div
      className={clsx(
        "fixed bottom-6 left-1/2 -translate-x-1/2 z-50",
        "flex items-center gap-3 rounded-full px-5 py-2.5",
        "bg-white dark:bg-gray-800",
        "border border-gray-200 dark:border-gray-700",
        "shadow-xl dark:shadow-black/40",
      )}
    >
      <span className="text-sm font-medium text-gray-700 dark:text-gray-200">
        {label}
      </span>

      {selectedAllocationCount > 0 && (
        <button
          type="button"
          onClick={onDelete}
          disabled={isDeleting}
          className={clsx(
            "text-xs font-medium px-3 py-1.5 rounded-full transition-colors",
            "bg-red-600 hover:bg-red-700 text-white",
            "disabled:opacity-40 disabled:cursor-not-allowed",
          )}
        >
          {isDeleting ? "Deleting\u2026" : (
            <>Delete <span className="opacity-60 text-[10px]">(Del)</span></>
          )}
        </button>
      )}

      {selectedResourceCount > 0 && (
        <button
          type="button"
          onClick={onAssign}
          className={clsx(
            "text-xs font-medium px-3 py-1.5 rounded-full transition-colors",
            "bg-sky-600 hover:bg-sky-700 dark:bg-sky-600 dark:hover:bg-sky-700 text-white",
          )}
        >
          Assign
        </button>
      )}

      <button
        type="button"
        onClick={onClear}
        className={clsx(
          "text-xs font-medium px-2 py-1.5 transition-colors",
          "text-gray-500 dark:text-gray-400",
          "hover:text-gray-700 dark:hover:text-gray-300",
        )}
      >
        Clear{" "}
        <span className="text-gray-400 dark:text-gray-500">(ESC)</span>
      </button>
    </div>
  );
}