import { ImageResponse } from "next/og";

export const size = {
  width: 1200,
  height: 630,
};

export const contentType = "image/png";

type GenerateTrailImageProps = {
  title: string;
  description: string;
  creatorHandle: string;
  stopsCount: number;
  accentColor: string;
  backgroundColor: string;
};

export async function generateTrailImage({
  title,
  description,
  creatorHandle,
  stopsCount,
  accentColor,
  backgroundColor,
}: GenerateTrailImageProps) {
  return new ImageResponse(
    <div
      style={{
        display: "flex",
        width: "100%",
        height: "100%",
        backgroundColor: backgroundColor,
        padding: "60px",
      }}
    >
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          width: "100%",
          height: "100%",
          border: `3px solid ${accentColor}`,
          borderRadius: "24px",
          padding: "60px",
          justifyContent: "space-between",
        }}
      >
        {/* Title and description */}
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            gap: "30px",
          }}
        >
          <h1
            style={{
              fontFamily: "monospace",
              fontSize: "72px",
              fontWeight: 500,
              color: accentColor,
              margin: 0,
              textTransform: "lowercase",
              letterSpacing: "-0.01em",
              lineHeight: 1.1,
            }}
          >
            {title}
          </h1>
          <p
            style={{
              fontFamily: "sans-serif",
              fontSize: "36px",
              lineHeight: 1.5,
              color: "#555",
              margin: 0,
            }}
          >
            {description}
          </p>
        </div>

        {/* Footer with metadata */}
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            fontSize: "32px",
            color: "#888",
            paddingTop: "30px",
            borderTop: "2px solid rgba(0, 0, 0, 0.08)",
          }}
        >
          <span
            style={{
              textTransform: "lowercase",
            }}
          >
            @{creatorHandle}
          </span>
          <span
            style={{
              textTransform: "lowercase",
            }}
          >
            {stopsCount} stops
          </span>
        </div>
      </div>
    </div>,
    {
      ...size,
    },
  );
}
