import React from 'react';
import { useApp } from '../context/AppContext';
import { Database, PlusCircle, Eye } from 'lucide-react';

export const LiveStatsBar = () => {
  const { liveStats } = useApp();

  return (
    <div className="bg-[#111827] text-slate-300 py-1.5 px-4 text-xs font-medium border-b border-slate-800 shadow-inner">
      <div className="max-w-[1600px] mx-auto flex items-center justify-center gap-6 sm:gap-10 flex-wrap">
        
        {/* Online Kullanıcı */}
        <div className="flex items-center gap-1.5">
          <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
          <span className="font-bold text-white tracking-wide">{liveStats.onlineKullanici.toLocaleString('tr-TR')}</span>
          <span className="text-slate-400">Online Kullanıcı</span>
        </div>

        {/* Toplam Kalem */}
        <div className="flex items-center gap-1.5">
          <Database className="w-3.5 h-3.5 text-blue-400" />
          <span className="font-bold text-white tracking-wide">{liveStats.toplamKalem.toLocaleString('tr-TR')}</span>
          <span className="text-slate-400">Toplam Kalem</span>
        </div>

        {/* Bugün Eklenen */}
        <div className="flex items-center gap-1.5">
          <PlusCircle className="w-3.5 h-3.5 text-emerald-400" />
          <span className="font-bold text-emerald-400 tracking-wide">{liveStats.bugunEklenen.toLocaleString('tr-TR')}</span>
          <span className="text-slate-400">Bugün Eklenen</span>
        </div>

        {/* Aktif Takip */}
        <div className="flex items-center gap-1.5">
          <Eye className="w-3.5 h-3.5 text-amber-400" />
          <span className="font-bold text-white tracking-wide">{liveStats.aktifTakip.toLocaleString('tr-TR')}</span>
          <span className="text-slate-400">Aktif Takip</span>
        </div>

      </div>
    </div>
  );
};