import React, { useMemo } from "react";
import CardRenderer from "../Cards/CardRenderer";
import { cardTokens } from "../../theme/cardTokens";

// Spec NEWS (mini) identique à celui en DB (pour demo local)
const NEWS_MINI_SPEC = {
  size: { w: 280, h: 110 },
  background: { type: "gradient", value: "newsBlue" },
  radius: 18,
  layers: [
    { id: "badge", type: "chip", x: 14, y: 12, text: "NEWS", style: "chip.news" },
    { id: "title", type: "text", x: 14, y: 40, w: 252, h: 44, bind: "data.headline", style: "text.title", maxLines: 2 },
    { id: "meta", type: "text", x: 14, y: 88, w: 252, h: 16, bind: "data.source", style: "text.meta", maxLines: 1 }
  ],
};

export default function PostCardTemplate({ post, theme = "blue", onOpen }) {
  // Adaptation depuis ton objet post actuel vers data_json style template
  const data = useMemo(() => {
    return {
      headline: post.title || "Untitled",
      source: post.author ? `by ${post.author}` : (post.sub_category || ""),
      summary: post.snippet || post.body || "",
      url: post.url || "",
      image: post.image || post.media_url || "",
    };
  }, [post]);

  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
      <CardRenderer
        spec={NEWS_MINI_SPEC}
        data={data}
        themeTokens={cardTokens[theme] || cardTokens.blue}
        onAction={(action, value) => {
          if (action.type === "open_url" && value) window.open(value, "_blank");
        }}
        className=""
      />
      {onOpen && (
        <button
          onClick={() => onOpen(post)}
          style={{
            marginLeft: 10,
            borderRadius: 999,
            padding: "8px 12px",
            border: "1px solid rgba(148,163,184,.7)",
            background: "rgba(15,23,42,.7)",
            color: "#e5e7eb",
            cursor: "pointer",
            fontWeight: 800,
            fontSize: 12,
          }}
        >
          Open
        </button>
      )}
    </div>
  );
}
