import { jsxs, jsx } from 'react/jsx-runtime';
import { XMarkIcon } from '@heroicons/react/24/outline';
import { Button } from '../../core/Button/Button.js';
import 'react';
import { cn } from '../../../utils/cn.js';

/**
 * Selection header that appears when rows are selected
 * Shows selection count and bulk action buttons
 */
const TableSelectionHeader = ({ selectedCount, totalCount, selectedRows, bulkActions = [], onClearSelection, className, }) => {
    if (selectedCount === 0)
        return null;
    return (jsxs("div", { className: cn("flex items-center justify-between px-3 py-1 rounded-lg shadow-xl bg-[var(--color-background-secondary)] z-10", className), children: [jsxs("div", { className: "flex items-center gap-3", children: [jsx("span", { className: "text-[var(--color-text-muted)] text-base border-r border-[var(--color-border)] pr-3", children: selectedCount === totalCount
                            ? `All ${selectedCount} selected`
                            : `${selectedCount} selected` }), bulkActions.length > 0 && (jsx("div", { className: "flex items-center gap-2", children: bulkActions.map((action) => {
                            return (jsx(Button, { color: "neutral", variant: "filled", onClick: () => action.onClick(selectedRows), className: "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]", size: "sm", children: action.label }, action.id));
                        }) }))] }), jsxs(Button, { color: "primary", variant: "link", onClick: onClearSelection, "aria-label": "Clear selection", children: [jsx(XMarkIcon, { className: "size-4" }), "Clear"] })] }));
};

export { TableSelectionHeader };
