"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { useParheliaSettings } from "../../hooks/useParheliaSettings";
/**
 * Visual indicator that appears when the frontend is running in dev mode or
 * when an environment label is configured in Parhelia settings.
 * This helps quickly distinguish between different environments.
 */
export function DevModeIndicator() {
    const parheliaSettings = useParheliaSettings();
    const isDevMode = process.env.PARHELIA_DEV_MODE === "true";
    // Determine label and color based on settings or dev mode fallback
    // Dev mode has priority - always show "DEV MODE" when in dev mode
    let label;
    let backgroundColor;
    let useGradient = false;
    if (isDevMode) {
        // Dev mode has priority - always show "DEV MODE" when in dev mode
        label = "DEV MODE";
        useGradient = true;
    }
    else if (parheliaSettings?.environmentLabel !== undefined &&
        parheliaSettings.environmentLabel !== null &&
        parheliaSettings.environmentLabel !== "") {
        // Use configured settings (only if not in dev mode)
        label = parheliaSettings.environmentLabel;
        backgroundColor = parheliaSettings.environmentColor;
        // If no color is set, use default gradient
        if (!backgroundColor) {
            useGradient = true;
        }
    }
    // Hide ribbon if no label is determined
    if (!label) {
        return null;
    }
    const ribbonStyle = {
        transform: "rotate(-45deg)",
        width: "110px",
        textAlign: "center",
        bottom: "22px",
        right: "-28px",
        ...(useGradient ? {} : backgroundColor ? { backgroundColor } : {}),
    };
    return (_jsx("div", { className: "pointer-events-none fixed right-0 bottom-0 z-9999 overflow-visible select-none opacity-50 lg:opacity-100", style: { width: "100px", height: "100px" }, title: `Environment: ${label}`, children: _jsx("div", { className: `absolute py-0.5 text-[9px] font-bold tracking-wider text-white uppercase shadow-lg ${useGradient ? "bg-linear-to-r from-amber-500 to-orange-500" : ""}`, style: ribbonStyle, children: label }) }));
}
//# sourceMappingURL=DevModeIndicator.js.map