"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";

export function CompleteLessonButton({
  lessonId,
  initialCompleted,
}: {
  lessonId: string;
  initialCompleted: boolean;
}) {
  const router = useRouter();
  const [completed, setCompleted] = useState(initialCompleted);
  const [loading, setLoading] = useState(false);

  async function toggle() {
    setLoading(true);
    const res = await fetch("/api/progress", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ lessonId, completed: !completed }),
    });
    setLoading(false);
    if (res.ok) {
      setCompleted(!completed);
      router.refresh();
    }
  }

  return (
    <div style={{ marginTop: "2rem" }}>
      <button type="button" className="btn btn-ghost" disabled={loading} onClick={toggle}>
        {loading ? "…" : completed ? "Als nicht abgeschlossen markieren" : "Lektion abschließen"}
      </button>
    </div>
  );
}