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

export default async function ImageLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const numId = Number(id);
  const neighbors = Number.isFinite(numId)
    ? getNeighborImageIds(numId)
    : { 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?exclude=${numId}`}
        />
      </div>
      {children}
    </div>
  );
}