import React from 'react';
import type { WallpaperType } from '../App';
import './WallpaperSelector.css';

interface WallpaperSelectorProps {
  onSelect: (type: WallpaperType) => void;
}

const WallpaperSelector: React.FC<WallpaperSelectorProps> = ({ onSelect }) => {
  return (
    <div className="wallpaper-selector">
      <div className="selector-container">
        <div className="quest-badge">День 1</div>
        <div className="windows-logo">🪟</div>
        <h1>Квест: Выбор темы</h1>
        <p className="subtitle">Попробуй разные версии Windows и почувствуй разницу!</p>
        
        <div className="wallpaper-options">
          <div className="wallpaper-option" onClick={() => onSelect('xp')}>
            <div className="wallpaper-preview xp-preview">🏔️</div>
            <div className="option-info">
              <h3>Windows XP</h3>
              <p>Классический стиль 2001 года</p>
            </div>
          </div>
          
          <div className="wallpaper-option" onClick={() => onSelect('win7')}>
            <div className="wallpaper-preview win7-preview">🐟</div>
            <div className="option-info">
              <h3>Windows 7</h3>
              <p>Современная классика 2009 года</p>
            </div>
          </div>
          
          <div className="wallpaper-option" onClick={() => onSelect('win10')}>
            <div className="wallpaper-preview win10-preview">🪟</div>
            <div className="option-info">
              <h3>Windows 10</h3>
              <p>Современный дизайн 2015 года</p>
            </div>
          </div>
        </div>

        <div className="selector-footer">
          <p>💡 Подсказка: Выберите любую тему, чтобы продолжить квест</p>
        </div>
      </div>
    </div>
  );
};

export default WallpaperSelector;
