story-generator/src/components/phonics/exercises/AlliterationExercise.tsx

import { Button } from "@/components/ui/button";
import { BaseExercise, type BaseExerciseProps } from "./BaseExercise";
import { cn } from "@/lib/utils";

interface AlliterationExerciseProps extends BaseExerciseProps {
  options: Array<{
    word: string;
    hasSameInitialSound: boolean;
  }>;
}

export function AlliterationExercise({ 
  currentWord, 
  onAnswer, 
  options, 
  disabled 
}: AlliterationExerciseProps) {
  return (
    <div className="space-y-8">
      <BaseExercise currentWord={currentWord} onAnswer={onAnswer} disabled={disabled} />
      
      <div className="space-y-4">
        <div className="text-center text-muted-foreground">
          Qual palavra começa com o mesmo som que <span className="font-medium text-foreground">{currentWord.word}</span>?
        </div>

        <div className="grid grid-cols-2 gap-4">
          {options.map((option) => (
            <Button
              key={option.word}
              onClick={() => onAnswer(option.word, option.hasSameInitialSound)}
              disabled={disabled}
              variant="outline"
              className={cn(
                "h-16 text-lg",
                disabled && option.hasSameInitialSound && "border-green-500 bg-green-50",
                disabled && !option.hasSameInitialSound && "border-red-500 bg-red-50"
              )}
            >
              {option.word}
            </Button>
          ))}
        </div>
      </div>
    </div>
  );
}