import { useI18n } from '../hooks/useI18n';
import { siteData } from '../data/siteData';

export default function StatsBar() {
  const { t } = useI18n();
  const projects = siteData.projects;

  const totalStars = projects.reduce((sum, p) => sum + p.stars, 0);
  const uniqueTechStacks = new Set(projects.flatMap((p) => p.techStack)).size;
  const uniquePlatforms = new Set(projects.flatMap((p) => p.platforms)).size;

  const stats = [
    { id: 'projects', value: projects.length, label: t('stats.projects') },
    { id: 'stars', value: totalStars, label: t('stats.stars') },
    { id: 'techStack', value: uniqueTechStacks, label: t('stats.techStack') },
    { id: 'platforms', value: uniquePlatforms, label: t('stats.platforms') },
  ];

  return (
    <div className="stats-bar">
      {stats.map((stat) => (
        <div key={stat.id} className="stat-item">
          <div className="stat-value">
            <span className="accent">{stat.value}</span>
          </div>
          <div className="stat-label">{stat.label}</div>
        </div>
      ))}
    </div>
  );
}
