import type { ReactNode } from "react";

export interface HeadlineBarProps {
  title: string;
  subtitle?: string;
  rightSlot?: ReactNode;
}

/**
 * HeadlineBar — dark verdict/headline strip used across Site Finder and analytics.
 * Background: var(--bg-headline) = #0F172A (slate-900).
 * Text: var(--fg-on-dark) / var(--fg-on-dark-muted).
 */
export function HeadlineBar({ title, subtitle, rightSlot }: HeadlineBarProps) {
  return (
    <div
      style={{
        background: "var(--bg-headline)",
        borderRadius: 12,
        padding: "14px 18px",
        display: "flex",
        alignItems: subtitle ? "flex-start" : "center",
        gap: 16,
      }}
      role="banner"
    >
      <div style={{ flex: 1, minWidth: 0 }}>
        <div
          style={{
            color: "var(--fg-on-dark)",
            fontSize: 15,
            fontWeight: 500,
            lineHeight: 1.4,
            fontVariantNumeric: "tabular-nums",
          }}
        >
          {title}
        </div>
        {subtitle && (
          <div
            style={{
              marginTop: 8,
              paddingTop: 8,
              borderTop: "1px solid rgba(255,255,255,0.1)",
              color: "var(--fg-on-dark-muted)",
              fontSize: 12,
              fontWeight: 400,
              lineHeight: 1.4,
            }}
          >
            {subtitle}
          </div>
        )}
      </div>
      {rightSlot && (
        <div style={{ flexShrink: 0, display: "flex", alignItems: "center" }}>
          {rightSlot}
        </div>
      )}
    </div>
  );
}
