"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { STUDY_MODES } from "@/config/studyModes";

interface ClassTabsProps {
  classSlug: string;
}

export function ClassTabs({ classSlug }: ClassTabsProps) {
  const pathname = usePathname();

  return (
    <div className="mb-8 border-b border-border-light">
      <nav className="flex gap-2" aria-label="Study modes">
        {STUDY_MODES.map((mode) => {
          const href = `/${classSlug}/${mode.path}`;
          const isActive = pathname === href || pathname.startsWith(href + "/");

          return (
            <Link
              key={mode.key}
              href={href}
              className={`relative min-h-12 px-4 py-3 text-sm font-bold transition-colors duration-200 ${
                isActive
                  ? "text-primary"
                  : "text-text-muted hover:text-text-heading"
              }`}
            >
              {mode.label}
              {isActive && (
                <span className="absolute bottom-0 left-2 right-2 h-[3px] rounded-t-full bg-primary" />
              )}
            </Link>
          );
        })}
      </nav>
    </div>
  );
}