'use client';

import { useTranslations } from 'next-intl';
import { Statistics as StatsType } from '../lib/gameState';

interface StatisticsProps {
    statistics: StatsType;
}

const BADGES = {
    1: '🏆', // Gold trophy
    2: '🥈', // Silver medal
    3: '🥉', // Bronze medal
    4: '⭐', // Star
    5: '✨', // Sparkles
    6: '💫', // Dizzy
    7: '🎵', // Musical note
    failed: '❌', // Cross mark
};

export default function Statistics({ statistics }: StatisticsProps) {
    const t = useTranslations('Statistics');
    const total =
        statistics.solvedIn1 +
        statistics.solvedIn2 +
        statistics.solvedIn3 +
        statistics.solvedIn4 +
        statistics.solvedIn5 +
        statistics.solvedIn6 +
        statistics.solvedIn7 +
        statistics.failed;

    const stats = [
        { attempts: 1, count: statistics.solvedIn1, badge: BADGES[1] },
        { attempts: 2, count: statistics.solvedIn2, badge: BADGES[2] },
        { attempts: 3, count: statistics.solvedIn3, badge: BADGES[3] },
        { attempts: 4, count: statistics.solvedIn4, badge: BADGES[4] },
        { attempts: 5, count: statistics.solvedIn5, badge: BADGES[5] },
        { attempts: 6, count: statistics.solvedIn6, badge: BADGES[6] },
        { attempts: 7, count: statistics.solvedIn7, badge: BADGES[7] },
        { attempts: t('failed'), count: statistics.failed, badge: BADGES.failed },
    ];

    return (
        <div className="statistics-container">
            <h3 className="statistics-title">{t('yourStatistics')}</h3>
            <p className="statistics-total">{t('totalPuzzles')}: {total}</p>
            <div className="statistics-grid">
                {stats.map((stat, index) => (
                    <div key={index} className="stat-item">
                        <div className="stat-badge">{stat.badge}</div>
                        <div className="stat-label">
                            {typeof stat.attempts === 'number' ? `${stat.attempts} ${t('try')}` : stat.attempts}
                        </div>
                        <div className="stat-count">{stat.count}</div>
                    </div>
                ))}
            </div>
        </div>
    );
}