"use client";

import { useState, useEffect } from "react";
import { CheckCircle } from "lucide-react";
import { isQuestionCompleted } from "@/lib/progress";

interface CompletionIndicatorProps {
  slug: string;
}

export function CompletionIndicator({ slug }: CompletionIndicatorProps) {
  const [completed, setCompleted] = useState(false);

  useEffect(() => {
    setCompleted(isQuestionCompleted(slug));
  }, [slug]);

  if (!completed) return null;

  return (
    <CheckCircle
      className="h-4 w-4 text-green-500 flex-shrink-0"
      aria-label="Completed"
    />
  );
}