"use client";

import { useRouter } from "next/navigation";
import { ChevronLeft } from "lucide-react";
import { ReactNode } from "react";

export function TopBar({
  title,
  right,
  onBack,
}: {
  title: string;
  right?: ReactNode;
  onBack?: () => void;
}) {
  const router = useRouter();

  return (
    <header className="sticky top-0 z-30 flex items-center justify-between px-4 pt-safe pb-3 backdrop-blur-xl bg-paper/70 dark:bg-ink/70">
      <button
        type="button"
        aria-label="Go back"
        onClick={() => (onBack ? onBack() : router.back())}
        className="flex h-10 w-10 items-center justify-center rounded-full glass"
      >
        <ChevronLeft size={20} strokeWidth={2.5} />
      </button>
      <h1 className="font-display text-[15px] font-semibold tracking-tight">
        {title}
      </h1>
      <div className="flex h-10 w-10 items-center justify-center">
        {right ?? null}
      </div>
    </header>
  );
}