import React from 'react';
import Modal from '../../components/common/Modal';
import { FaTrophy, FaFire } from 'react-icons/fa';
import * as FaIcons from 'react-icons/fa';
import * as MdIcons from 'react-icons/md';
import * as IoIcons from 'react-icons/io5';
import * as BiIcons from 'react-icons/bi';
import * as HiIcons from 'react-icons/hi';
import * as RiIcons from 'react-icons/ri';

const AchievementsModal = ({ isOpen, onClose, userAchievements }) => {
  const getIconComponent = (iconName) => {
    if (!iconName) return FaTrophy;
    
    const prefix = iconName.substring(0, 2).toLowerCase();
    switch (prefix) {
      case 'fa': return FaIcons[iconName] || FaTrophy;
      case 'md': return MdIcons[iconName] || FaTrophy;
      case 'io': return IoIcons[iconName] || FaTrophy;
      case 'bi': return BiIcons[iconName] || FaTrophy;
      case 'hi': return HiIcons[iconName] || FaTrophy;
      case 'ri': return RiIcons[iconName] || FaTrophy;
      default: return FaTrophy;
    }
  };

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      title="Достижения"
    >
      <div className="space-y-4">
        {userAchievements.length > 0 ? (
          userAchievements.map((achievement) => {
            const IconComponent = getIconComponent(achievement.icon);

            return (
              <div
                key={achievement.id}
                className="bg-campfire-charcoal/20 backdrop-blur-md border border-campfire-ash/30 rounded-lg p-4"
              >
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 rounded-lg bg-campfire-amber/10 flex items-center justify-center">
                    <IconComponent className="w-6 h-6 text-campfire-amber" />
                  </div>
                  <div className="flex-1">
                    <h3 className="text-campfire-light font-medium">
                      {achievement.title}
                    </h3>
                    <p className="text-campfire-ash text-sm mt-1">
                      {achievement.description}
                    </p>
                    {achievement.xp_reward > 0 && (
                      <div className="flex items-center text-campfire-amber text-sm mt-2">
                        <FaFire className="mr-1" />
                        <span>+{achievement.xp_reward} XP</span>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            );
          })
        ) : (
          <div className="text-center py-8 text-campfire-ash">
            У вас пока нет достижений
          </div>
        )}
      </div>
    </Modal>
  );
};

export default AchievementsModal; 