import ChartTooltip from '../../charts/ChartTooltip';

/**
 * Dashboard 图表组件：Tooltip 原子组件预览
 *
 * 仅两个变体（与 dashboard 视觉规范一一对应，禁止再出现自定义 tooltip 壳）：
 *   - variant="chart"   ：图表多系列 hover（白底，标题 + 系列圆点 + 名称 + 数值）
 *   - variant="caption" ：解释/说明型（黑底）
 *       · captionShape="text"        ：纯文字（指标卡口径说明）
 *       · captionShape="label-value" ：标签 + 数值（折线图日期 hover）
 *
 * 仅展示 tooltip 视觉壳本身，不模拟使用场景。
 */
export default function ChartTooltipPreview({
  variant = 'chart',
  captionShape = 'text',
}) {
  if (variant === 'caption') {
    if (captionShape === 'label-value') {
      return (
        <div style={{ display: 'flex', justifyContent: 'center', padding: 24 }}>
          <ChartTooltip variant="caption" label="2024-01-06" value="70.00%" />
        </div>
      );
    }
    return (
      <div style={{ display: 'flex', justifyContent: 'center', padding: 24 }}>
        <ChartTooltip variant="caption">指标口径解释文案占位</ChartTooltip>
      </div>
    );
  }

  // chart 变体：白底多系列
  const rows = [
    { name: 'Series 1', value: 23, color: 'var(--color-data-0, #5B8DEF)', dataKey: 'series_0' },
    { name: 'Series 2', value: 3, color: 'var(--color-data-4, #24CDA5)', dataKey: 'series_1' },
  ];
  return (
    <div style={{ display: 'flex', justifyContent: 'center', padding: 24 }}>
      <ChartTooltip variant="chart" label="04-24" rows={rows} />
    </div>
  );
}
