import { UserStats } from '../../api/types';
import { cn } from '../../utils/helpers';
import { formatNumber } from '../../utils/formatters';
import { Swords, Trophy, Target, TrendingUp, Clock, Award } from 'lucide-react';

interface ProfileStatsProps {
  stats: UserStats;
  className?: string;
}

export function ProfileStats({ stats, className }: ProfileStatsProps) {
  const statCards = [
    {
      label: 'Матчей сыграно',
      value: stats.matchesPlayed,
      icon: Swords,
      color: 'text-blue-400',
    },
    {
      label: 'Побед',
      value: stats.matchesWon,
      icon: Trophy,
      color: 'text-yellow-400',
    },
    {
      label: 'Флагов захвачено',
      value: stats.flagsCaptured,
      icon: Target,
      color: 'text-green-400',
    },
    {
      label: 'Рейтинг',
      value: formatNumber(stats.rating),
      icon: TrendingUp,
      color: 'text-purple-400',
    },
    {
      label: 'Часов в игре',
      value: stats.hoursPlayed,
      icon: Clock,
      color: 'text-orange-400',
    },
    {
      label: 'Достижений',
      value: stats.achievements?.length || 0,
      icon: Award,
      color: 'text-pink-400',
    },
  ];

  return (
    <div className={cn('grid gap-4 sm:grid-cols-2 lg:grid-cols-3', className)}>
      {statCards.map((stat) => {
        const Icon = stat.icon;
        return (
          <div
            key={stat.label}
            className="rounded-xl border border-border bg-card p-6"
          >
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">{stat.label}</p>
                <p className="mt-2 text-2xl font-bold">{stat.value}</p>
              </div>
              <div className={cn('rounded-lg p-3', stat.color.replace('text-', 'bg-').replace('400', '500/20'))}>
                <Icon className={cn('h-6 w-6', stat.color)} />
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

export default ProfileStats;