import { ImageResponse } from "next/og";

export const alt = "Acieb Énergie - Article";
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";

const CATEGORY_LABELS: Record<string, string> = {
  actualites: "Actualités",
  guides: "Guides",
  reglementation: "Réglementation",
  "cas-clients": "Cas clients",
};

function slugToTitle(slug: string): string {
  return slug
    .replace(/-/g, " ")
    .replace(/\b\w/g, (c) => c.toUpperCase())
    .replace(/\b(2026|2025)\b/, "$1");
}

export default async function OgImage({
  params,
}: {
  params: Promise<{ category: string; slug: string }>;
}) {
  const { category, slug } = await params;
  const title = slugToTitle(slug);
  const categoryLabel = CATEGORY_LABELS[category] ?? category;

  return new ImageResponse(
    (
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          padding: "60px 80px",
          background: "linear-gradient(135deg, #1e293b 0%, #0f172a 100%)",
        }}
      >
        <div
          style={{
            display: "flex",
            alignItems: "center",
            gap: 16,
          }}
        >
          <div
            style={{
              display: "flex",
              padding: "8px 20px",
              background: "rgba(251, 76, 1, 0.15)",
              borderRadius: 24,
              color: "#FB4C01",
              fontSize: 22,
              fontWeight: 600,
            }}
          >
            {categoryLabel}
          </div>
        </div>

        <div
          style={{
            display: "flex",
            fontSize: title.length > 80 ? 40 : title.length > 50 ? 48 : 56,
            fontWeight: 700,
            color: "#ffffff",
            lineHeight: 1.2,
            letterSpacing: "-0.02em",
            maxWidth: "100%",
          }}
        >
          {title.length > 120 ? `${title.slice(0, 117)}...` : title}
        </div>

        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
          }}
        >
          <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
            <svg
              width="36"
              height="36"
              viewBox="0 0 28 29"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M4.53553 16.0355C2.58291 14.0829 2.58291 10.9171 4.53553 8.96447L10.1924 3.30761C12.145 1.35499 15.3108 1.35499 17.2635 3.30761L22.9203 8.96447C24.8729 10.9171 24.8729 14.0829 22.9203 16.0355L17.2635 21.6924C15.3108 23.645 12.145 23.645 10.1924 21.6924L4.53553 16.0355Z"
                fill="#FB4C01"
              />
            </svg>
            <div
              style={{
                display: "flex",
                fontSize: 28,
                fontWeight: 600,
                color: "#e2e8f0",
              }}
            >
              Acieb Énergie
            </div>
          </div>
          <div
            style={{
              display: "flex",
              width: 80,
              height: 4,
              background: "#FB4C01",
              borderRadius: 2,
            }}
          />
        </div>
      </div>
    ),
    { ...size },
  );
}