/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

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

/**
 * Explicit "this data has no backend yet" placeholder. Used for UI sections whose
 * live API is not built (see docs/03_REQUIRED_BACKEND_APIS.md → [R*] ids). We show
 * this instead of fabricated numbers so nothing fake reaches staging.
 */
export default function AwaitingApi({
  label,
  api,
  className = '',
  compact = false,
}: {
  /** What the section will show once wired (e.g. "Operational alerts"). */
  label: string;
  /** The required-API id from the spec doc, e.g. "[R12]". */
  api?: string;
  className?: string;
  compact?: boolean;
}) {
  return (
    <div
      className={`flex flex-col items-center justify-center text-center rounded-xl border border-dashed border-slate-300 bg-slate-50/60 text-slate-400 ${
        compact ? 'p-4 gap-1.5' : 'p-8 gap-2'
      } ${className}`}
    >
      <PlugZap size={compact ? 16 : 22} className="text-slate-300" />
      <p className={`font-semibold text-slate-500 ${compact ? 'text-xs' : 'text-sm'}`}>{label}</p>
      <p className="text-[11px] leading-relaxed">
        Awaiting backend API{api ? ` ${api}` : ''} — no live data source yet.
      </p>
    </div>
  );
}