"use client";

import { useEffect, useState } from 'react';
import { useLocale } from '@/contexts/LocaleContext';

export function PartnerBadge() {
  const { t } = useLocale();
  const [showBadge, setShowBadge] = useState(false);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchSettings = async () => {
      try {
        const response = await fetch('/api/settings');
        if (response.ok) {
          const data = await response.json();
          setShowBadge(data.showPartnerBadge || false);
        }
      } catch (error) {
        console.error('Erro ao carregar settings:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchSettings();

    // Recarregar quando configurações forem atualizadas
    const handleRefresh = () => {
      fetchSettings();
    };
    window.addEventListener('settings:refresh', handleRefresh);
    return () => window.removeEventListener('settings:refresh', handleRefresh);
  }, []);

  if (loading || !showBadge) {
    return null;
  }

  return (
    <div className="inline-flex items-center gap-3 bg-white/10 backdrop-blur-md border border-white/20 rounded-full px-5 py-2 hover:bg-white/20 transition-colors cursor-default">
      <i className="ri-verified-badge-fill text-primary text-xl"></i>
      <span className="text-sm font-bold tracking-wider uppercase text-white">
        {t('home.officialProvider')} <span className="text-primary">Coca-Cola</span>
      </span>
    </div>
  );
}