"use client";

import type { ReactNode } from "react";
import { Typography } from "antd";

type CmsSectionTitleProps = {
  icon: ReactNode;
  title: string;
  description?: string;
  className?: string;
};

/** Section header with small icon badge — use for list cards and form blocks. */
export function CmsSectionTitle({
  icon,
  title,
  description,
  className = "",
}: CmsSectionTitleProps) {
  return (
    <div className={`flex gap-3.5 ${className}`.trim()}>
      <span className="cms-section-title-icon mt-0.5 [&_.anticon]:text-[18px]" aria-hidden>
        {icon}
      </span>
      <div className="min-w-0 flex-1">
        <Typography.Title
          level={5}
          className="!mb-0 !mt-0 !text-[15px] !font-bold !leading-snug !tracking-tight text-[#0f172a]"
        >
          {title}
        </Typography.Title>
        {description ? (
          <Typography.Text
            type="secondary"
            className="mt-1.5 block text-[13px] leading-relaxed text-slate-500"
          >
            {description}
          </Typography.Text>
        ) : null}
      </div>
    </div>
  );
}