'use client';

import React from 'react';
import { Box, VStack, Text, Progress, SimpleGrid, Badge } from '@chakra-ui/react';
import { IAchievement } from '../../backend/models/User';

interface UserProfileProps {
  username: string;
  level: number;
  experience: number;
  balance: number;
  achievements: IAchievement[];
}

export default function UserProfile({ username, level, experience, balance, achievements }: UserProfileProps) {
  // Простая формула для определения прогресса опыта
  const expNeeded = level * 100;
  const expProgress = (experience / expNeeded) * 100;

  return (
    <Box w="100%" p={4} borderWidth="1px" borderRadius="lg">
      <VStack spacing={4} align="stretch">
        <Text fontSize="2xl">Профиль</Text>
        
        <Box>
          <Text fontSize="lg">Имя пользователя: {username}</Text>
          <Text>Уровень: {level}</Text>
          <Text mb={2}>Опыт: {experience}/{expNeeded}</Text>
          <Progress value={expProgress} colorScheme="green" />
        </Box>

        <Box>
          <Text fontSize="lg">Баланс: {balance} монет</Text>
        </Box>

        {achievements.length > 0 && (
          <Box>
            <Text fontSize="lg" mb={2}>Достижения:</Text>
            <SimpleGrid columns={[1, 2, 3]} spacing={4}>
              {achievements.map((achievement) => (
                <Badge
                  key={achievement.id}
                  p={2}
                  borderRadius="md"
                  colorScheme="purple"
                  variant="subtle"
                >
                  {achievement.name}
                </Badge>
              ))}
            </SimpleGrid>
          </Box>
        )}
      </VStack>
    </Box>
  );
}