'use client';

import React from 'react';
import { Loader2 } from 'lucide-react';

const ACCENT_CLASSES: Record<string, { spinner: string; text: string }> = {
    amber:   { spinner: 'text-amber-400',   text: 'text-amber-400/80' },
    blue:   { spinner: 'text-blue-400',   text: 'text-blue-400/80' },
    cyan:   { spinner: 'text-cyan-400',   text: 'text-cyan-400/80' },
    emerald:{ spinner: 'text-emerald-400',text: 'text-emerald-400/80' },
    fuchsia:{ spinner: 'text-fuchsia-400',text: 'text-fuchsia-400/80' },
    indigo: { spinner: 'text-indigo-400', text: 'text-indigo-400/80' },
    pink:   { spinner: 'text-pink-400',  text: 'text-pink-400/80' },
    purple: { spinner: 'text-purple-400', text: 'text-purple-400/80' },
    rose:   { spinner: 'text-rose-400',   text: 'text-rose-400/80' },
};

export type NodeLoadingAccent = keyof typeof ACCENT_CLASSES;

/** 节点内统一的加载遮罩：半透明背景 + 旋转圈 + 文案，颜色与节点主题一致 */
export function NodeLoadingOverlay({
    message = '生成中...',
    accent = 'cyan',
}: {
    message?: string;
    accent?: NodeLoadingAccent;
}) {
    const classes = ACCENT_CLASSES[accent] ?? ACCENT_CLASSES.cyan;
    return (
        <div className="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-black/50 backdrop-blur-sm z-20">
            <Loader2 className={`animate-spin ${classes.spinner}`} size={28} />
            <span className={`text-xs ${classes.text}`}>{message}</span>
        </div>
    );
}
