/* Federica Gori — card condivise (Diario + Home).
   Segnaposto immagine on-brand finché non arrivano le foto reali. */

function PostImage({ tone = "sand", ratio = "16 / 10", style = {} }) {
  return <Photo label="Immagine articolo" icon="circleDot" ratio={ratio} tone={tone} rounded="0" style={style} />;
}

/* Card articolo — anteprima editoriale (il tema fa da categoria). */
function PostCard({ post }) {
  const { Card, Badge } = window.FedericaGoriDesignSystem_549960;
  return (
    <Card padding="0" style={{ overflow: "hidden", display: "flex", flexDirection: "column", height: "100%" }}>
      <PostImage tone={post.tone} ratio="16 / 10" />
      <div style={{ padding: "var(--space-5)", display: "flex", flexDirection: "column", gap: 11, flex: 1 }}>
        <Badge tone="neutral">{window.fgThemeLabel(post.theme)}</Badge>
        <h3 style={{ fontSize: 22, margin: 0, lineHeight: 1.2 }}>{post.title}</h3>
        <p style={{ margin: 0, color: "var(--text-secondary)", fontSize: 15, lineHeight: 1.55, flex: 1 }}>{post.excerpt}</p>
        <div style={{ display: "flex", alignItems: "center", gap: 12, fontSize: 12.5, color: "var(--text-tertiary)", marginTop: 2 }}>
          <span>{post.date}</span><span aria-hidden="true">·</span><span>{post.read} di lettura</span>
        </div>
      </div>
    </Card>
  );
}

/* Riga-intestazione di un tema del Diario. */
function ThemeHeader({ theme, count }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
      <div style={{ width: 52, height: 52, borderRadius: "var(--radius-md)", background: "var(--surface-sunken)", border: "1px solid var(--border-subtle)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
        <Icon name={theme.icon} size={26} color="var(--terra-600)" />
      </div>
      <div>
        <h2 id={theme.id} style={{ fontSize: "var(--text-display-sm)", margin: 0, scrollMarginTop: 90 }}>{theme.label}</h2>
        <p style={{ margin: "4px 0 0", color: "var(--text-secondary)", fontSize: 15, lineHeight: 1.5 }}>{theme.blurb}</p>
      </div>
    </div>
  );
}

Object.assign(window, { PostImage, PostCard, ThemeHeader });