import React, { useState } from 'react';
import './ChartHelpButton.css';

interface Props {
  title: string;
  description: React.ReactNode;
  inline?: boolean;
}

export default function ChartHelpButton({ title, description, inline = false }: Props) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className={`chart-help-container ${inline ? 'inline' : 'absolute'}`}>
      <button 
        className={`btn btn-sm chart-help-btn ${isOpen ? 'active' : ''}`}
        onClick={() => setIsOpen(!isOpen)}
        title="Toggle Explanation"
      >
        💡
      </button>
      
      {isOpen && (
        <div className="chart-help-popup">
          <div className="chart-help-header">
            <h4>{title}</h4>
            <button className="chart-help-close" onClick={() => setIsOpen(false)}>×</button>
          </div>
          <div className="chart-help-body">
            {description}
          </div>
        </div>
      )}
    </div>
  );
}