import { readFileSync } from "node:fs";
import { join } from "node:path";

const brandMark = `data:image/png;base64,${readFileSync(
  join(process.cwd(), "public/brand/mark-dark.png"),
).toString("base64")}`;

export const OG_SIZE = { width: 1200, height: 630 } as const;
export const OG_CONTENT_TYPE = "image/png";

export function OgCard({
  eyebrow,
  title,
  description,
}: {
  eyebrow: string;
  title: string;
  description: string;
}) {
  return (
    <div
      style={{
        width: "100%",
        height: "100%",
        display: "flex",
        position: "relative",
        flexDirection: "column",
        justifyContent: "space-between",
        background: "#050505",
        color: "#f4f1e8",
        padding: 72,
        fontFamily: "Arial, sans-serif",
      }}
    >
      <img
        src={brandMark}
        alt="Evandro.dev.br"
        width={80}
        height={80}
        style={{ position: "absolute", top: 48, right: 72 }}
      />
      <div
        style={{
          display: "flex",
          paddingRight: 112,
          color: "#ccff00",
          fontSize: 24,
          letterSpacing: "0.16em",
          textTransform: "uppercase",
        }}
      >
        {eyebrow}
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
        <div
          style={{
            display: "flex",
            fontSize: 64,
            fontWeight: 700,
            lineHeight: 1.08,
          }}
        >
          {title}
        </div>
        <div
          style={{
            display: "flex",
            maxWidth: 980,
            color: "#c7c3ba",
            fontSize: 28,
            lineHeight: 1.35,
          }}
        >
          {description}
        </div>
      </div>
      <div
        style={{
          display: "flex",
          borderTop: "1px solid #343434",
          paddingTop: 24,
          fontSize: 20,
          letterSpacing: "0.12em",
        }}
      >
        EVANDRO.DEV.BR / ENGENHARIA DE SOFTWARE
      </div>
    </div>
  );
}