"use client";

import { useTransition } from "react";
import { Check } from "lucide-react";
import { toggleLessonProgress } from "@/app/(student)/courses/[slug]/lessons/[lessonId]/actions";

export function LessonCompleteButton({
  lessonId,
  slug,
  isCompleted,
}: {
  lessonId: string;
  slug: string;
  isCompleted: boolean;
}) {
  const [pending, startTransition] = useTransition();

  return (
    <button
      onClick={() => startTransition(() => toggleLessonProgress(lessonId, slug))}
      disabled={pending}
      className={`btn-aubade ${isCompleted ? "btn-aubade-accent" : ""} flex items-center gap-2 px-5 py-2.5 text-sm`}
      style={{ opacity: pending ? 0.6 : 1 }}
    >
      <Check size={15} strokeWidth={isCompleted ? 3 : 2} />
      {pending ? "..." : isCompleted ? "Пройдено" : "Отметить как пройденный"}
    </button>
  );
}