import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import { getImageIdByCode, getNeighborImageIds } from "@/lib/db/queries";
import { ImageNav } from "@/components/image/ImageNav";

export default async function IdLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ code: string }>;
}) {
  const { code } = await params;
  const decoded = decodeURIComponent(code);
  const id = getImageIdByCode(decoded);
  const neighbors = id != null ? getNeighborImageIds(id) : { prev: null, next: null };

  return (
    <div className="max-w-[1600px] mx-auto px-6 pt-6">
      <div className="flex items-center justify-between mb-4">
        <Link href="/" className="inline-flex items-center gap-1 text-sm text-[var(--color-fg-dim)] hover:text-[var(--color-fg)]">
          <ArrowLeft className="w-4 h-4" /> Back to library
        </Link>
        <ImageNav
          prev={neighbors.prev}
          next={neighbors.next}
          randomEndpoint={`/image/random${id != null ? `?exclude=${id}` : ""}`}
        />
      </div>
      {children}
    </div>
  );
}