import React from "react";

// ─── SectionHeader ─────────────────────────────────────
// Page headings use consistent typography, supporting text, and actions.

interface SectionHeaderProps {
  /** Section title */
  title: string;
  /** Optional section description / subtitle */
  description?: React.ReactNode;
  /** Optional action element (button, link, etc.) */
  action?: React.ReactNode;
  /** Additional CSS class */
  className?: string;
  /** Additional inline styles */
  style?: React.CSSProperties;
}

export function SectionHeader({
  title,
  description,
  action,
  className = "",
  style,
}: SectionHeaderProps) {
  return (
    <div
      className={className}
      style={{
        display: "flex",
        alignItems: description ? "flex-start" : "center",
        justifyContent: "space-between",
        marginBottom: "var(--space-4)",
        ...style,
      }}
    >
      <div>
        <h2 className="section-title" style={{ margin: 0 }}>
          {title}
        </h2>
        {description && (
          <p
            style={{
              fontSize: "var(--text-sm)",
              color: "var(--text-secondary)",
              margin: "var(--space-1) 0 0",
              lineHeight: 1.5,
            }}
          >
            {description}
          </p>
        )}
      </div>
      {action && <div>{action}</div>}
    </div>
  );
}