interface PageSectionHeaderProps {
  title: string;
  actionLabel?: string;
  onAction?: () => void;
}

export default function PageSectionHeader({
  title,
  actionLabel,
  onAction,
}: PageSectionHeaderProps) {
  return (
    <div className="flex w-full items-center justify-between gap-4">
      <h1 className="text-base font-medium text-gray-900 sm:text-lg">{title}</h1>

      {actionLabel && (
        <button
          type="button"
          onClick={onAction}
          className="shrink-0 text-xs font-medium text-[#00AFC1] transition-colors hover:text-[#008fa0] sm:text-sm"
        >
          {actionLabel}
        </button>
      )}
    </div>
  );
}
