import * as React from "react";
import { cn } from "@/lib/utils";

interface SectionHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
  title: string;
  action?: React.ReactNode;
}

export function SectionHeader({
  title,
  action,
  className,
  ...props
}: SectionHeaderProps) {
  return (
    <div
      data-slot="section-header"
      className={cn(
        "flex items-center justify-between mb-4 pb-2 border-b border-[var(--border-subtle)]",
        className
      )}
      {...props}
    >
      <h3
        className="font-[var(--font-heading)] text-[var(--text-primary)] text-lg uppercase tracking-[0.1em]"
        style={{ fontFamily: "var(--font-heading)", color: "var(--text-primary)" }}
      >
        {title}
      </h3>
      {action && <div className="flex-shrink-0">{action}</div>}
    </div>
  );
}
