import React from 'react';
import Modal from '../../components/common/Modal';
import { FaPalette, FaSquare, FaWaveSquare } from 'react-icons/fa';

const ShowcaseThemeModal = ({ isOpen, onClose, currentTheme, onSelectTheme }) => {
  const themes = [
    {
      id: 'none',
      name: 'Без темы',
      icon: FaPalette,
      description: 'Простой фон без анимации'
    },
    {
      id: 'squares',
      name: 'Квадраты',
      icon: FaSquare,
      description: 'Анимированные квадраты'
    },
    {
      id: 'dither',
      name: 'Волны',
      icon: FaWaveSquare,
      description: 'Анимированные волны'
    }
  ];

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      title="Выберите тему витрины"
    >
      <div className="space-y-4">
        {themes.map((theme) => {
          const Icon = theme.icon;
          const isSelected = currentTheme === theme.id;

          return (
            <button
              key={theme.id}
              onClick={() => onSelectTheme(theme.id)}
              className={`w-full p-4 rounded-lg border transition-all duration-200 ${
                isSelected
                  ? 'bg-campfire-amber/20 border-campfire-amber text-campfire-light'
                  : 'bg-campfire-charcoal/20 border-campfire-ash/30 text-campfire-ash hover:bg-campfire-charcoal/30'
              }`}
            >
              <div className="flex items-center gap-4">
                <div className={`w-12 h-12 rounded-lg flex items-center justify-center ${
                  isSelected ? 'bg-campfire-amber/20' : 'bg-campfire-charcoal/40'
                }`}>
                  <Icon className={`w-6 h-6 ${isSelected ? 'text-campfire-amber' : 'text-campfire-ash'}`} />
                </div>
                <div className="flex-1 text-left">
                  <h3 className={`font-medium ${isSelected ? 'text-campfire-light' : 'text-campfire-ash'}`}>
                    {theme.name}
                  </h3>
                  <p className="text-sm text-campfire-ash mt-1">
                    {theme.description}
                  </p>
                </div>
              </div>
            </button>
          );
        })}
      </div>
    </Modal>
  );
};

export default ShowcaseThemeModal; 