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

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

interface SoundMatchExerciseProps extends BaseExerciseProps {
  type: 'initial' | 'final';
  options: Array<{
    word: string;
    hasMatchingSound: boolean;
  }>;
}

export function SoundMatchExercise({ 
  currentWord, 
  onAnswer, 
  type,
  options, 
  disabled 
}: SoundMatchExerciseProps) {
  const instruction = type === 'initial' 
    ? "Qual palavra começa com o mesmo som?"
    : "Qual palavra termina com o mesmo som?";

  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">
          {instruction}
        </div>

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