'use client';

import React from 'react';
import { MetricHelpIcon } from '../MetricHelpIcon/MetricHelpIcon';
import {
    getDashboardMetricHelp,
    type DashboardMetricHelpKey,
} from '../../dashboardMetricHelp';
import styles from './DashboardMetricTitle.module.scss';

export type DashboardMetricTitleProps = {
    children: React.ReactNode;
    helpKey: DashboardMetricHelpKey;
    className?: string;
};

/** Título de indicador ou gráfico com ícone de ajuda contextual. */
export function DashboardMetricTitle({ children, helpKey, className = '' }: DashboardMetricTitleProps) {
    const help = getDashboardMetricHelp(helpKey);

    return (
        <span className={`${styles.root}${className ? ` ${className}` : ''}`}>
            <span className={styles.label}>{children}</span>
            <MetricHelpIcon help={help} stopPropagation />
        </span>
    );
}

export default DashboardMetricTitle;