import { Lightbulb } from 'lucide-react';
import type { ExerciseBlockData } from '@/types/contentBlocks';

export function ExerciseBlock({ block }: { block: ExerciseBlockData }) {
  return (
    <div className="rounded-lg border border-amber-500/20 bg-amber-500/5 p-3">
      <div className="mb-1 flex items-center gap-2">
        <Lightbulb className="h-4 w-4 text-amber-600" />
        <p className="text-sm font-medium text-amber-900 dark:text-amber-200">
          {block.title ?? 'تمرین'}
        </p>
      </div>
      <p className="text-sm text-amber-800 dark:text-amber-300">{block.prompt}</p>
    </div>
  );
}