import { useEffect, useState } from 'react';

const FOOTER_HINTS = [
  '想看哪个角度的数据？告诉我们一下嘛',
  '更多统计维度接入中，欢迎您的建议 ~',
  '下一个图表，可能就是您建议的那个',
  '数据科学家正在深夜挖掘新维度…',
  '维度灵感正在路上，钉一下产品同学也行',
  '数字背后还有故事，等下一次上线揭晓',
];

interface Props {
  /** 自定义提示词集合，默认使用通用文案 */
  hints?: string[];
  /** 切换间隔，默认 4 秒 */
  intervalMs?: number;
  /** 额外类名 */
  className?: string;
  /** 点击时回调（一般用来打开反馈弹窗） */
  onClick?: () => void;
}

export default function RotatingFooterHint({ hints = FOOTER_HINTS, intervalMs = 4000, className = '', onClick }: Props) {
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    if (hints.length <= 1) return;
    const t = setInterval(() => setIdx(i => (i + 1) % hints.length), intervalMs);
    return () => clearInterval(t);
  }, [hints, intervalMs]);

  return (
    <div
      className={`flex items-center gap-1.5 text-[11px] text-slate-400 font-bold ${onClick ? 'cursor-pointer hover:text-blue-500 transition-colors' : ''} ${className || 'mt-1 justify-center'}`}
      onClick={onClick}
    >
      <span className="inline-block w-1.5 h-1.5 rounded-full bg-blue-400 animate-pulse" />
      <span
        key={idx}
        style={{ animation: 'rotatingHintFade 0.5s ease' }}
      >
        {hints[idx]}
      </span>
      <style>{`
        @keyframes rotatingHintFade {
          from { opacity: 0; transform: translateY(2px); }
          to   { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </div>
  );
}