import { DASHBOARD_CARD_TITLE, DASHBOARD_ROW_TITLE, DASHBOARD_MODULE_SUBTITLE } from '../typography';

/**
 * Dashboard 看板模块大标题 — 与热点监控大屏卡片标题一致。
 * 可选 24×24 icon + 主标题 + 可选副文案。
 *
 * 字号分级：
 *   - h2 / h3：白卡主标题（text-lg semibold）
 *   - h4 / span：子卡 / 行级小标题（text-sm semibold，比白卡主标题小一级）
 *
 * @prop {string} title — 模块主标题
 * @prop {string} [titleIconSrc=''] — 标题前图标 URL；不传则不渲染 icon
 * @prop {string} [subtitle=''] — 标题右侧说明 / 计数等辅助文案
 * @prop {'h2'|'h3'|'h4'|'span'} [as='h3'] — 标题语义标签
 * @prop {string} [className=''] — 外层容器附加类名
 */
export default function DashboardModuleTitle({
  title,
  titleIconSrc = '',
  subtitle = '',
  as: TitleTag = 'h3',
  className = '',
}) {
  const isSubLevel = TitleTag === 'h4' || TitleTag === 'span';
  const titleClass = isSubLevel ? DASHBOARD_ROW_TITLE : DASHBOARD_CARD_TITLE;
  return (
    <div className={['inline-flex min-w-0 max-w-full flex-wrap items-center gap-2 overflow-hidden', className].filter(Boolean).join(' ')}>
      <div className="inline-flex min-w-0 shrink-0 items-center gap-2 overflow-hidden">
        {titleIconSrc ? (
          <img src={titleIconSrc} alt="" aria-hidden="true" className="h-6 w-6 shrink-0" />
        ) : null}
        <TitleTag
          className={`m-0 min-w-0 max-w-full shrink-0 truncate whitespace-nowrap ${titleClass}`}
          style={{ fontWeight: 'var(--font-weight-semibold, 600)' }}
        >
          {title}
        </TitleTag>
      </div>
      {subtitle ? <span className={`min-w-0 max-w-full truncate ${DASHBOARD_MODULE_SUBTITLE}`}>{subtitle}</span> : null}
    </div>
  );
}
