import React from 'react';
import { PET_CLASSES } from '../data/petClasses';
import { PetClassInfo } from '../types/Pet';

interface ClassSelectionProps {
  onSelect: (classKey: string, classInfo: PetClassInfo) => void;
}

export default function ClassSelection({ onSelect }: ClassSelectionProps) {
  return (
    <div className="min-h-screen bg-gray-900 text-white p-8">
      <h1 className="text-4xl font-bold text-center mb-12">Choose Your Virtual Companion</h1>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-7xl mx-auto">
        {Object.entries(PET_CLASSES).map(([key, classInfo]) => (
          <button
            key={key}
            onClick={() => onSelect(key, classInfo)}
            className={`bg-${classInfo.color}-900/30 hover:bg-${classInfo.color}-800/50
              border-2 border-${classInfo.color}-500/50 rounded-lg p-6
              transition-all duration-300 transform hover:scale-105`}
          >
            <div className="text-4xl mb-4">{classInfo.emoji}</div>
            <h3 className={`text-2xl font-bold text-${classInfo.color}-400 mb-2`}>
              {classInfo.name}
            </h3>
            <p className="text-gray-300 mb-4">{classInfo.description}</p>
            <div className="space-y-2">
              {classInfo.modifiers.map((modifier, index) => (
                <div key={index} className="text-sm text-gray-400 flex items-center">
                  <span className="mr-2">•</span>
                  {modifier}
                </div>
              ))}
            </div>
          </button>
        ))}
      </div>
    </div>
  );
}