'use client';

import React from 'react';
import { Box, VStack, Text, Progress, Heading, useColorModeValue } from '@chakra-ui/react';
import { Achievement } from '../types/user';

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

export const UserProfile: React.FC<UserProfileProps> = ({ username, level, experience, balance, achievements }) => {
  const bgColor = useColorModeValue('white', 'gray.800');
  const borderColor = useColorModeValue('gray.200', 'gray.700');

  return (
    <Box 
      p={6} 
      bg={bgColor} 
      borderRadius="lg" 
      borderWidth="1px" 
      borderColor={borderColor}
      shadow="sm"
    >
      <VStack spacing={4} align="stretch">
        <Heading size="md">{username}</Heading>
        
        <Box>
          <Text fontWeight="bold">Уровень {level}</Text>
          <Progress value={experience} max={100} colorScheme="green" />
        </Box>

        <Box>
          <Text fontWeight="bold">Баланс</Text>
          <Text fontSize="2xl">{balance} 🔥</Text>
        </Box>

        <Box>
          <Text fontWeight="bold" mb={2}>Достижения</Text>
          <VStack align="stretch" spacing={2}>
            {achievements.map((achievement) => (
              <Box 
                key={achievement.id}
                p={2}
                borderRadius="md"
                borderWidth="1px"
                borderColor={borderColor}
              >
                <Text>{achievement.name}</Text>
                <Text fontSize="sm" color="gray.500">{achievement.description}</Text>
              </Box>
            ))}
          </VStack>
        </Box>
      </VStack>
    </Box>
  );
};