"use client";

import Link from "next/link";
import { useSelectedLayoutSegment } from "next/navigation";

// Overview | Videos.
//
// A CLIENT component on purpose. Next 16 layouts are cached during navigation
// and DO NOT RERENDER — they cannot read searchParams and would not re-evaluate
// an active-tab check on a client-side move between the two routes.
// useSelectedLayoutSegment is the supported way to ask "which child segment is
// rendered", and it re-renders because this component does.

export function ChannelTabs({ slug }: { slug: string }) {
  const segment = useSelectedLayoutSegment();
  const onVideos = segment === "videos";
  return (
    <nav aria-label="channel sections" className="flex items-center gap-1">
      <Tab href={`/channels/${slug}`} active={!onVideos} label="Overview" />
      <Tab href={`/channels/${slug}/videos`} active={onVideos} label="Videos" />
    </nav>
  );
}

function Tab({
  href,
  active,
  label,
}: {
  href: string;
  active: boolean;
  label: string;
}) {
  return (
    <Link
      href={href}
      aria-current={active ? "page" : undefined}
      aria-label={`${label} tab`}
      className={`rounded-md px-3 py-1 text-sm ${
        active
          ? "bg-muted text-foreground font-medium"
          : "text-muted-foreground hover:bg-muted hover:text-foreground"
      }`}
    >
      {label}
    </Link>
  );
}