"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useRef, useEffect } from "react";
import { cn } from "@stigmer/theme";
/**
 * Dropdown button for exporting usage data as CSV.
 *
 * Presents two options: "Daily Summary" and "Model Breakdown",
 * corresponding to the two CSV export formats.
 */
export function ExportButton({ onExport, isExporting, disabled, className, }) {
    const [open, setOpen] = useState(false);
    const ref = useRef(null);
    useEffect(() => {
        if (!open)
            return;
        function handleClickOutside(e) {
            if (ref.current && !ref.current.contains(e.target)) {
                setOpen(false);
            }
        }
        document.addEventListener("mousedown", handleClickOutside);
        return () => document.removeEventListener("mousedown", handleClickOutside);
    }, [open]);
    return (_jsxs("div", { ref: ref, className: cn("relative", className), children: [_jsxs("button", { type: "button", onClick: () => setOpen(!open), disabled: disabled || isExporting, className: cn("inline-flex items-center gap-1.5 rounded-md border border-border px-2.5 py-1 text-xs font-medium transition-colors", "text-muted-foreground hover:text-foreground hover:bg-accent", "disabled:pointer-events-none disabled:opacity-50"), "aria-expanded": open, "aria-haspopup": "true", children: [_jsx(DownloadIcon, { className: "size-3.5" }), isExporting ? "Exporting…" : "Export"] }), open && (_jsxs("div", { className: "absolute right-0 top-full z-10 mt-1 w-44 rounded-md border border-border bg-popover py-1 shadow-md", role: "menu", children: [_jsx("button", { type: "button", role: "menuitem", className: "w-full px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent", onClick: () => {
                            onExport("daily_summary");
                            setOpen(false);
                        }, children: "Daily Summary" }), _jsx("button", { type: "button", role: "menuitem", className: "w-full px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent", onClick: () => {
                            onExport("model_breakdown");
                            setOpen(false);
                        }, children: "Model Breakdown" })] }))] }));
}
function DownloadIcon({ className }) {
    return (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, "aria-hidden": "true", children: [_jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), _jsx("polyline", { points: "7 10 12 15 17 10" }), _jsx("line", { x1: "12", y1: "15", x2: "12", y2: "3" })] }));
}
//# sourceMappingURL=ExportButton.js.map