import React from 'react';

interface CounterProps {
  totalClicks: number;
  autoClickRate: number;
}

export function Counter({ totalClicks, autoClickRate }: CounterProps) {
  return (
    <div className="text-center space-y-4">
      <div className="bg-gradient-to-r from-purple-600 via-pink-500 to-cyan-400 p-6 rounded-xl border-4 border-yellow-300 shadow-2xl">
        <h1 className="text-6xl font-bold text-white mb-2" style={{ fontFamily: 'Comic Sans MS, cursive' }}>
          BOZO CLICKER
        </h1>
        <div className="text-4xl font-bold text-yellow-300 animate-pulse">
          {totalClicks.toLocaleString()} CLICKS
        </div>
        {autoClickRate > 0 && (
          <div className="text-lg text-green-300 mt-2">
            🤖 Auto-clicking at {autoClickRate}/sec
          </div>
        )}
      </div>
    </div>
  );
}