"use client";
// Sous-navigation horizontale du cours (Progression / Concepts / Flashcards / …).
import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/components/ui";

const TABS = [
  { seg: "", label: "Progression" },
  { seg: "diapositives", label: "Diapositives" },
  { seg: "concepts", label: "Concepts" },
  { seg: "flashcards", label: "Flashcards" },
  { seg: "quiz", label: "Quiz" },
  { seg: "examens", label: "Examens" },
  { seg: "plan", label: "Plan" },
  { seg: "erreurs", label: "Erreurs" },
  { seg: "resumes", label: "Résumés" },
];

export function CourseNav({ course, title, color }: { course: string; title: string; color: string }) {
  const pathname = usePathname();
  const base = `/apprendre/${course}`;
  return (
    <div className="sticky top-0 z-20 bg-card/85 backdrop-blur border-b border-app">
      <div className="px-4 sm:px-6 pt-3 flex items-center gap-2.5">
        <span className="w-2.5 h-2.5 rounded-full shrink-0" style={{ background: color }} aria-hidden />
        <h1 className="font-bold text-fg text-[15px]">{course.toUpperCase()}</h1>
        <span className="text-sm text-muted truncate hidden sm:inline">— {title}</span>
      </div>
      <nav className="px-2 sm:px-4 flex gap-1 overflow-x-auto pb-0 [-webkit-overflow-scrolling:touch]" aria-label="Sections du cours">
        {TABS.map((t) => {
          const href = t.seg ? `${base}/${t.seg}` : base;
          const active = t.seg ? pathname === href || pathname.startsWith(href + "/") : pathname === base;
          return (
            <Link
              key={t.seg}
              href={href}
              className={cn(
                "px-3 py-2.5 text-[13px] font-medium whitespace-nowrap border-b-2 -mb-px transition-colors",
                active
                  ? "border-brand-500 text-brand-600 dark:text-brand-300"
                  : "border-transparent text-muted hover:text-fg"
              )}
            >
              {t.label}
            </Link>
          );
        })}
      </nav>
    </div>
  );
}