"use client";

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

import { GearIcon, HomeIcon, PlusIcon } from "@/components/icons";
import { openSettings } from "@/lib/ui-events";
import { cn } from "@/lib/utils";

/**
 * iOS-style bottom tab bar. Rendered on the library and create screens on
 * phones; hidden on desktop (the header carries the same actions there) and on
 * the full-screen study feed.
 */
export function TabBar() {
  const pathname = usePathname();

  const item = "flex flex-1 flex-col items-center justify-center gap-1 py-2 text-[11px] font-medium transition-colors";
  const active = "text-[var(--text)]";
  const idle = "text-[var(--text-subtle)]";

  return (
    <nav
      aria-label="Main"
      className="tabbar fixed inset-x-0 bottom-0 z-40 flex items-stretch pb-safe sm:hidden"
    >
      <Link href="/" aria-current={pathname === "/" ? "page" : undefined} className={cn(item, pathname === "/" ? active : idle)}>
        <HomeIcon className="size-6" />
        Library
      </Link>
      <Link
        href="/create"
        aria-current={pathname === "/create" ? "page" : undefined}
        className={cn(item, pathname === "/create" ? active : idle)}
      >
        <span className="grid size-6 place-items-center rounded-full bg-[var(--text)] text-white dark:bg-white dark:text-[#0d0d0d]">
          <PlusIcon className="size-4" />
        </span>
        New deck
      </Link>
      <button type="button" onClick={openSettings} className={cn(item, idle)}>
        <GearIcon className="size-6" />
        Settings
      </button>
    </nav>
  );
}