import type { ReactNode } from 'react'
import { safeHttpUrl } from './safe-url'
import type { SectionCardAction } from './SectionCard'

export interface SectionHeadingProps {
  title: string
  /** Trailing dim text after the title, e.g. "· last factory run". */
  subtitle?: string
  /** Rendered inline after the title/subtitle, e.g. a `StaleBadge` for this group's adapter. */
  titleBadge?: ReactNode
  action?: SectionCardAction
}

/** Bare (borderless) section header above a widget group — e.g. the forensics row's "Run forensics — …" bar. */
export function SectionHeading({ title, subtitle, titleBadge, action }: SectionHeadingProps) {
  return (
    <div className="mb-2.5 flex items-baseline justify-between px-0.5">
      <span className="flex items-baseline gap-1.5 text-[12px] font-semibold text-fg">
        {title}
        {subtitle && <span className="font-normal text-fg-subtle"> {subtitle}</span>}
        {titleBadge}
      </span>
      {action &&
        (action.href ? (
          <a href={safeHttpUrl(action.href)} className="text-[11px] text-fg-subtle no-underline">
            {action.label}
          </a>
        ) : (
          <button
            type="button"
            onClick={action.onClick}
            className="cursor-pointer border-0 bg-transparent p-0 text-[11px] text-fg-subtle"
          >
            {action.label}
          </button>
        ))}
    </div>
  )
}