import React from 'react';

interface SectionHeadingProps {
  title: string;
  /** Muted clause sitting on the title's baseline, not underneath it. */
  hint?: React.ReactNode;
  /** Right-aligned controls (buttons, filters). */
  action?: React.ReactNode;
}

const SectionHeading = ({
  title,
  hint,
  action,
}: SectionHeadingProps): JSX.Element => (
  <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1.5">
    <h2 className="whitespace-nowrap text-lg font-bold tracking-[-0.01em] text-gray-900">
      {title}
    </h2>
    {hint && (
      <div className="flex items-baseline gap-1 text-sm text-gray-500">
        {hint}
      </div>
    )}
    {action && <div className="ml-auto flex items-center gap-2">{action}</div>}
  </div>
);

export default SectionHeading;