refactor: update pet action handling and restructure pet types for better clarity

src/components/PetRegister.tsx

@@ -0,0 +1,67 @@
+import { useState } from 'react';
+import ClassSelection from './ClassSelection';
+import NameModal from './modal/NameModal';
+import ConfirmationModal from './modal/ConfirmationModal';
+import { PetClassInfo } from '../types/Pet';
+import { createPet } from '../services/api/api';
+
+interface PetRegisterProps {
+  onPetCreated: (newPet: any) => void;
+}
+
+export default function PetRegister({ onPetCreated }: PetRegisterProps) {
+  const [showConfirmation, setShowConfirmation] = useState(false);
+  const [showNameModal, setShowNameModal] = useState(false);
+  const [petName, setPetName] = useState('');
+  const [selectedClass, setSelectedClass] = useState<{ key: string; info: PetClassInfo } | null>(null);
+
+  const handleClassSelect = (classKey: string, classInfo: PetClassInfo) => {
+    setSelectedClass({ key: classKey, info: classInfo });
+    setShowConfirmation(true);
+  };
+
+  const handleConfirm = () => {
+    if (!selectedClass) return;
+    setShowConfirmation(false);
+    setShowNameModal(true);
+    setPetName('');
+  };
+
+  const handleNameSubmit = async () => {
+    if (!selectedClass || !petName.trim()) return;
+
+    try {
+      const newPet = await createPet({
+        name: petName.trim(),
+        class: selectedClass.key,
+      });
+      onPetCreated(newPet);
+    } catch (error) {
+      console.error('Error creating pet:', error);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-900 text-white">
+      {showNameModal && selectedClass ? (
+        <NameModal
+          selectedClass={selectedClass}
+          petName={petName}
+          setPetName={setPetName}
+          handleNameSubmit={handleNameSubmit}
+          setShowNameModal={setShowNameModal}
+          setSelectedClass={setSelectedClass}
+        />
+      ) : showConfirmation && selectedClass ? (
+        <ConfirmationModal
+          selectedClass={selectedClass}
+          handleConfirm={handleConfirm}
+          setShowConfirmation={setShowConfirmation}
+          setSelectedClass={setSelectedClass}
+        />
+      ) : (
+        <ClassSelection onSelect={handleClassSelect} />
+      )}
+    </div>
+  );
+}