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

type OgImageContentProps = {
  visualSrc: string;
};

/** Gemeinsames Layout für Open-Graph- und X/Twitter-Vorschauen. */
export function OgImageContent({ visualSrc }: OgImageContentProps) {
  return (
    <div
      style={{
        width: "100%",
        height: "100%",
        display: "flex",
        position: "relative",
        overflow: "hidden",
        backgroundColor: "#f7f4ed",
        fontFamily: "Arial, sans-serif",
      }}
    >
      {/* eslint-disable-next-line @next/next/no-img-element -- next/image is unsupported inside next/og's ImageResponse (Satori) rendering */}
      <img
        src={visualSrc}
        alt=""
        width={1200}
        height={630}
        style={{ display: "flex", position: "absolute", inset: 0, width: "100%", height: "100%" }}
      />

      <div
        style={{
          display: "flex",
          position: "absolute",
          inset: 0,
          width: 705,
          backgroundImage: "linear-gradient(90deg, rgba(247,244,237,0.98) 0%, rgba(247,244,237,0.92) 78%, rgba(247,244,237,0) 100%)",
        }}
      />

      <div
        style={{
          display: "flex",
          position: "relative",
          flexDirection: "column",
          width: 650,
          padding: "63px 0 58px 76px",
          color: "#111412",
        }}
      >
        <div style={{ display: "flex", alignItems: "center", fontSize: 40, fontWeight: 700, letterSpacing: -1.5 }}>
          <span>Entscheid</span>
          <span style={{ color: "#0d7a57", fontFamily: "Georgia, serif", fontStyle: "italic", fontWeight: 400 }}>omat</span>
        </div>

        <div style={{ display: "flex", flexDirection: "column", marginTop: 78, fontSize: 66, lineHeight: 1.04, fontWeight: 700, letterSpacing: -3.2 }}>
          <span>Lass den</span>
          <span>
            <span style={{ color: "#0d7a57", fontFamily: "Georgia, serif", fontStyle: "italic", fontWeight: 400, marginRight: 16 }}>Zufall</span>entscheiden.
          </span>
        </div>

        <div style={{ display: "flex", marginTop: 27, color: "#4c5c54", fontSize: 24, lineHeight: 1.35 }}>
          Münze werfen, Glücksrad drehen, würfeln &amp; mehr.
        </div>

        <div style={{ display: "flex", marginTop: "auto", alignItems: "center" }}>
          <div style={{ display: "flex", padding: "12px 20px", borderRadius: 999, backgroundColor: "#0d7a57", color: "#ffffff", fontSize: 18, fontWeight: 700, letterSpacing: 1.2 }}>
            7 TOOLS · KOSTENLOS · OHNE ANMELDUNG
          </div>
        </div>
      </div>

      <div style={{ display: "flex", position: "absolute", right: 540, bottom: 34, color: "#405249", fontSize: 16, fontWeight: 700, letterSpacing: 0.4 }}>
        entscheidomat.com
      </div>
    </div>
  );
}