import React from "react";

interface OGImageTemplateProps {
  title: string;
  description?: string;
  label?: string;
}

export function OGImageTemplate({
  title,
  description,
  label,
}: OGImageTemplateProps) {
  const accentBlue = "#3b82f6";
  const slateDark = "#0f172a";
  const slateText = "#1e293b";
  const slateLight = "#64748b";

  const containerStyle: React.CSSProperties = {
    height: "100%",
    width: "100%",
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-start",
    justifyContent: "center",
    backgroundColor: "#ffffff",
    padding: "80px",
    position: "relative",
    fontFamily: "Inter",
  };

  return (
    <div style={containerStyle}>
      {/* Background Technographic Accent */}
      <div
        style={{
          position: "absolute",
          top: "-100px",
          right: "-100px",
          width: "500px",
          height: "500px",
          borderRadius: "250px",
          backgroundColor: "#f1f5f9",
          display: "flex",
        }}
      />

      <div
        style={{
          display: "flex",
          flexDirection: "column",
          position: "relative",
          zIndex: 10,
        }}
      >
        {/* Label / Category */}
        {label && (
          <div
            style={{
              fontSize: "20px",
              fontWeight: 700,
              color: accentBlue,
              textTransform: "uppercase",
              letterSpacing: "0.2em",
              marginBottom: "24px",
              display: "flex",
            }}
          >
            {label}
          </div>
        )}

        {/* Title */}
        <div
          style={{
            fontSize: title.length > 40 ? "64px" : "82px",
            fontWeight: 700,
            color: slateDark,
            lineHeight: "1.1",
            maxWidth: "950px",
            marginBottom: "32px",
            display: "flex",
            letterSpacing: "-0.025em",
          }}
        >
          {title}
        </div>

        {/* Description */}
        {description && (
          <div
            style={{
              fontSize: "30px",
              color: slateLight,
              maxWidth: "850px",
              lineHeight: "1.4",
              display: "flex",
              fontWeight: 400,
            }}
          >
            {description.length > 160
              ? description.substring(0, 157) + "..."
              : description}
          </div>
        )}
      </div>

      {/* Brand Footer */}
      <div
        style={{
          position: "absolute",
          bottom: "80px",
          left: "80px",
          display: "flex",
          alignItems: "center",
        }}
      >
        <div
          style={{
            width: "60px",
            height: "4px",
            backgroundColor: slateDark,
            borderRadius: "2px",
            marginRight: "20px",
          }}
        />
        <div
          style={{
            fontSize: "22px",
            fontWeight: 700,
            color: slateDark,
            textTransform: "lowercase",
            letterSpacing: "0.05em",
            display: "flex",
          }}
        >
          mintel.me
        </div>
      </div>

      {/* Blue Brand Strip */}
      <div
        style={{
          position: "absolute",
          top: 0,
          right: 0,
          width: "12px",
          height: "100%",
          backgroundColor: accentBlue,
        }}
      />
    </div>
  );
}
