import { useState } from 'react';
import { AlertTriangle, X } from 'lucide-react';
import { ENV_CONFIG, IS_PRODUCTION } from '../config/environment';

/**
 * Banner visual que aparece em ambiente NAO-producao
 * Avisa qual ambiente esta rodando
 */
export default function AmbientBanner() {
  const [dismissed, setDismissed] = useState(false);

  // So mostra em producao
  if (IS_PRODUCTION || dismissed) return null;

  const { bannerText, bannerColor } = ENV_CONFIG;

  return (
    <div className="fixed bottom-4 right-4 z-[100] max-w-md">
      <div className={`${bannerColor} text-[#0e0e0e] rounded-xl shadow-2xl p-4 border-2 border-white/20`}>
        <div className="flex items-start gap-3">
          <AlertTriangle className="w-5 h-5 shrink-0 mt-0.5" />
          <div className="flex-1">
            <p className="font-bold text-sm">Ambiente: {bannerText}</p>
            <p className="text-xs mt-1 opacity-90">
              Tracking desativado | SEO: noindex | 
              Nenhum dado enviado a Mautic, GA4, Ads ou Pixel.
            </p>
          </div>
          <button
            onClick={() => setDismissed(true)}
            className="shrink-0 p-1 hover:bg-black/20 rounded-lg transition-colors"
            aria-label="Fechar"
          >
            <X className="w-4 h-4" />
          </button>
        </div>
      </div>
    </div>
  );
}