import React from 'react';
import { CircleDollarSign } from 'lucide-react';
import { useApp } from '../context/AppContext';

export const TotalGeneratedBanner: React.FC = () => {
  const { totalGeneratedMoney, settings, texts, t, tNum } = useApp();

  return (
    <section id="total-revenue-banner" className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 my-8">
      <div
        className="rounded-2xl border p-6 sm:p-8 text-center space-y-2 relative overflow-hidden shadow-lg transition-colors"
        style={{
          backgroundColor: 'var(--card-color, #0E1216)',
          borderColor: 'var(--border-color, #222A33)'
        }}
      >
        <div className="absolute -right-8 -top-8 w-32 h-32 bg-emerald-500/10 rounded-full blur-2xl pointer-events-none"></div>
        <div className="absolute -left-8 -bottom-8 w-32 h-32 bg-amber-500/10 rounded-full blur-2xl pointer-events-none"></div>

        <div
          className="inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider font-mono"
          style={{ color: 'var(--muted-text-color, #8A99A8)' }}
        >
          <CircleDollarSign className="w-3.5 h-3.5 text-emerald-500" />
          <span>{t('total_generated_prefix', undefined, texts.total_generated_prefix || 'TOPBD has generated')}</span>
        </div>

        <div className="text-3xl sm:text-4xl md:text-5xl font-black font-mono tracking-tight">
          <span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-500 via-teal-400 to-amber-400 dark:from-emerald-400 dark:via-teal-200 dark:to-amber-300">
            {settings.currency_symbol}{tNum(totalGeneratedMoney)}
          </span>
        </div>

        <p
          className="text-xs max-w-sm mx-auto transition-colors"
          style={{ color: 'var(--muted-text-color, #8A99A8)' }}
        >
          {t('total_generated_suffix', undefined, texts.total_generated_suffix || 'in verified bids since launch')}
        </p>
      </div>
    </section>
  );
};
