import { loadTrailDetailForOG } from "@/data/queries";
import { size, contentType, generateTrailImage } from "./generateTrailImage";

export const alt = "Sidetrail";
export { size, contentType };

type Props = {
  params: Promise<{
    handle: string;
    rkey: string;
  }>;
};

export default async function Image({ params }: Props) {
  const { handle, rkey } = await params;

  // Decode URL-encoded handle and strip @ prefix if present
  const decodedHandle = decodeURIComponent(handle);
  const cleanHandle = decodedHandle.startsWith("@") ? decodedHandle.slice(1) : decodedHandle;

  const trail = await loadTrailDetailForOG(cleanHandle, rkey);

  return generateTrailImage({
    title: trail.title,
    description: trail.description,
    creatorHandle: trail.creatorHandle,
    stopsCount: trail.stopsCount,
    accentColor: trail.accentColor,
    backgroundColor: trail.backgroundColor,
  });
}
