import React from "react";

interface BlogOGImageTemplateProps {
    title: string;
    description?: string;
    label?: string;
    accentColor?: string;
    keyword?: string;
    backgroundImageSrc?: string;
}

export function BlogOGImageTemplate({
    title,
    description,
    label,
    accentColor,
    keyword,
    backgroundImageSrc,
}: BlogOGImageTemplateProps) {
    const accent = accentColor || "#3b82f6";
    const white = "#ffffff";
    const slateLight = "#cbd5e1"; // slate-300 for readable descriptions on dark bg

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

    return (
        <div style={containerStyle}>
            {/* Primary Thumbnail Background Image */}
            {backgroundImageSrc && (
                <img
                    src={backgroundImageSrc}
                    width="1200"
                    height="630"
                    style={{
                        position: "absolute",
                        top: 0,
                        left: 0,
                        width: "100%",
                        height: "100%",
                        objectFit: "cover",
                    }}
                />
            )}

            {/* Dark overlay to make text highly legible */}
            <div
                style={{
                    position: "absolute",
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0,
                    display: "flex",
                    // Deep dark gradient that is almost solid on the left and fades out slightly on the right
                    backgroundImage: "linear-gradient(to right, rgba(15, 23, 42, 0.98) 0%, rgba(15, 23, 42, 0.88) 50%, rgba(15, 23, 42, 0.6) 100%)",
                }}
            />

            {/* Subtle Grid Pattern overlay */}
            <div
                style={{
                    position: "absolute",
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0,
                    backgroundImage: `linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px)`,
                    backgroundSize: "40px 40px",
                    display: "flex",
                }}
            />

            {/* Accent geometric block (right side) */}
            <div
                style={{
                    position: "absolute",
                    top: "60px",
                    right: "80px",
                    width: "200px",
                    height: "200px",
                    borderRadius: "24px",
                    border: `3px solid ${accent}`,
                    opacity: 0.3,
                    display: "flex",
                }}
            />
            <div
                style={{
                    position: "absolute",
                    top: "100px",
                    right: "120px",
                    width: "160px",
                    height: "160px",
                    borderRadius: "20px",
                    backgroundColor: accent,
                    opacity: 0.15,
                    display: "flex",
                }}
            />

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

                {/* Title */}
                <div
                    style={{
                        fontSize: title.length > 40 ? "56px" : "72px",
                        fontWeight: 700,
                        color: white,
                        lineHeight: "1.1",
                        marginBottom: "28px",
                        display: "flex",
                        letterSpacing: "-0.03em",
                    }}
                >
                    {title}
                </div>

                {/* Description */}
                {description && (
                    <div
                        style={{
                            fontSize: "26px",
                            color: slateLight,
                            lineHeight: "1.45",
                            display: "flex",
                            fontWeight: 400,
                        }}
                    >
                        {description.length > 120
                            ? description.substring(0, 117) + "..."
                            : description}
                    </div>
                )}
            </div>

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

            {/* Keyword badge (bottom-right) */}
            {keyword && (
                <div
                    style={{
                        position: "absolute",
                        bottom: "60px",
                        right: "80px",
                        display: "flex",
                        alignItems: "center",
                        gap: "8px",
                    }}
                >
                    <div
                        style={{
                            width: "8px",
                            height: "8px",
                            borderRadius: "4px",
                            backgroundColor: accent,
                            display: "flex",
                            opacity: 0.8,
                        }}
                    />
                    <div
                        style={{
                            fontSize: "14px",
                            fontWeight: 700,
                            color: white,
                            textTransform: "uppercase",
                            letterSpacing: "0.15em",
                            fontFamily: "ui-monospace, monospace",
                            display: "flex",
                            opacity: 0.6,
                        }}
                    >
                        {keyword}
                    </div>
                </div>
            )}

            {/* Accent Strip */}
            <div
                style={{
                    position: "absolute",
                    top: 0,
                    left: 0,
                    width: "100%",
                    height: "5px",
                    backgroundColor: accent,
                }}
            />
        </div>
    );
}