Untitled

import React, { useState } from 'react';
import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { Button } from '@/components/ui/button';

const scenarios = [
  {
    situation: "Ein Kind mit Autismus hält sich in einem lauten Raum die Ohren zu.",
    options: [
      { text: "Das Kind ist unhöflich und möchte nicht zuhören.", correct: false },
      { text: "Das Kind könnte überempfindlich gegenüber Geräuschen sein.", correct: true },
      { text: "Das Kind spielt ein Spiel.", correct: false }
    ],
    explanation: "Kinder mit Autismus können überempfindlich gegenüber bestimmten Reizen sein, wie z.B. lauten Geräuschen."
  },
  {
    situation: "Ein autistisches Kind wiederholt ständig die gleiche Handbewegung.",
    options: [
      { text: "Das Kind übt für einen Zaubertrick.", correct: false },
      { text: "Das Kind zeigt eine typische Stereotypie.", correct: true },
      { text: "Das Kind hat einen Krampf in der Hand.", correct: false }
    ],
    explanation: "Wiederholende Bewegungen, sogenannte Stereotypien, sind charakteristisch für Autismus und können eine beruhigende Wirkung haben."
  },
  {
    situation: "Ein Kind mit Autismus isst nur bestimmte Lebensmittel einer Farbe.",
    options: [
      { text: "Das Kind ist wählerisch und verwöhnt.", correct: false },
      { text: "Das Kind könnte eine Über- oder Unterempfindlichkeit im Mundbereich haben.", correct: true },
      { text: "Das Kind mag nur diese Farbe.", correct: false }
    ],
    explanation: "Viele Kinder mit Autismus haben sensorische Besonderheiten, die auch das Essverhalten beeinflussen können."
  },
  {
    situation: "Ein autistisches Kind reagiert nicht, wenn sein Name gerufen wird.",
    options: [
      { text: "Das Kind ist unhöflich und ignoriert andere absichtlich.", correct: false },
      { text: "Das Kind könnte Schwierigkeiten haben, auditive Reize zu verarbeiten.", correct: true },
      { text: "Das Kind ist taub.", correct: false }
    ],
    explanation: "Kinder mit Autismus können Schwierigkeiten haben, bestimmte auditive Reize wie ihren Namen aus Hintergrundgeräuschen herauszufiltern."
  },
  {
    situation: "Ein Kind mit Autismus spricht in einem sehr förmlichen, 'erwachsenen' Ton.",
    options: [
      { text: "Das Kind ahmt einen Erwachsenen nach.", correct: false },
      { text: "Das Kind könnte eine gut entwickelte Sprache haben, aber Schwierigkeiten mit altersgerechter Kommunikation.", correct: true },
      { text: "Das Kind ist hochbegabt.", correct: false }
    ],
    explanation: "Einige Kinder mit Autismus entwickeln eine sehr fortgeschrittene Sprache, haben aber Schwierigkeiten mit der altersgerechten und situationsangemessenen Kommunikation."
  }
];

const AutismusLernspiel = () => {
  const [currentScenario, setCurrentScenario] = useState(0);
  const [showExplanation, setShowExplanation] = useState(false);
  const [score, setScore] = useState(0);
  const [gameOver, setGameOver] = useState(false);

  const handleAnswer = (correct) => {
    if (correct) setScore(score + 1);
    setShowExplanation(true);
  };

  const nextScenario = () => {
    if (currentScenario < scenarios.length - 1) {
      setCurrentScenario(currentScenario + 1);
      setShowExplanation(false);
    } else {
      setGameOver(true);
    }
  };

  const restartGame = () => {
    setCurrentScenario(0);
    setShowExplanation(false);
    setScore(0);
    setGameOver(false);
  };

  if (gameOver) {
    return (
      <Card className="w-full max-w-md mx-auto mt-8">
        <CardHeader className="text-center text-2xl font-bold">Spiel beendet!</CardHeader>
        <CardContent>
          <p className="text-center mb-4">Dein Ergebnis: {score} von {scenarios.length}</p>
          <Button onClick={restartGame} className="w-full">Neues Spiel starten</Button>
        </CardContent>
      </Card>
    );
  }

  const scenario = scenarios[currentScenario];

  return (
    <Card className="w-full max-w-md mx-auto mt-8">
      <CardHeader className="text-center text-2xl font-bold">Verstehe Autismus</CardHeader>
      <CardContent>
        <p className="mb-4">{scenario.situation}</p>
        {scenario.options.map((option, index) => (
          <Button 
            key={index} 
            onClick={() => handleAnswer(option.correct)}
            className="w-full mb-2"
            disabled={showExplanation}
          >
            {option.text}
          </Button>
        ))}
        {showExplanation && (
          <div className="mt-4">
            <p className="mb-2">{scenario.explanation}</p>
            <Button onClick={nextScenario} className="w-full">
              {currentScenario < scenarios.length - 1 ? "Nächstes Szenario" : "Ergebnis anzeigen"}
            </Button>
          </div>
        )}
      </CardContent>
    </Card>
  );
};

export default AutismusLernspiel;