'use client';

import { useEffect, useState } from 'react';
import { FlaskConical } from 'lucide-react';

let cached: boolean | null = null;

/** Small "🧪 ডেমো মোড" badge — shown whenever the server runs in DEMO_MODE. */
export default function DemoBadge({ className = '' }: { className?: string }) {
  const [demo, setDemo] = useState<boolean>(cached ?? false);

  useEffect(() => {
    if (cached !== null) {
      setDemo(cached);
      return;
    }
    fetch('/api/config')
      .then((r) => r.json())
      .then((d) => {
        cached = Boolean(d.demoMode);
        setDemo(cached);
      })
      .catch(() => {});
  }, []);

  if (!demo) return null;

  return (
    <span
      className={`inline-flex items-center gap-1 rounded-full bg-sun-100 px-3 py-1 text-xs font-semibold text-sun-600 ${className}`}
    >
      <FlaskConical className="h-3.5 w-3.5" />
      ডেমো মোড
    </span>
  );
}