import { getTemplateData } from '../../data/templateData';
import { BookOpen, ChevronDown } from 'lucide-react';
import { useState } from 'react';

export default function AbbreviationPanel() {
  const [isOpen, setIsOpen] = useState(false);
  const ABBREVIATIONS = getTemplateData()?.abbreviations || [];

  return (
    <div className="section" id="section-abbreviations">
      <div className="section__header" style={{ cursor: 'pointer' }} onClick={() => setIsOpen(!isOpen)}>
        <div className="section__header-icon">
          <BookOpen size={20} />
        </div>
        <h2 className="section__title">Net Health Abbreviation Quick Reference</h2>
        <span className={`collapsible-trigger__icon ${isOpen ? 'collapsible-trigger__icon--open' : ''}`} style={{ marginLeft: 'auto' }}>
          <ChevronDown size={20} />
        </span>
      </div>

      {isOpen && (
        <div className="abbrev-panel">
          {ABBREVIATIONS.map(cat => (
            <div className="abbrev-category" key={cat.category}>
              <div className="abbrev-category__title">{cat.category}</div>
              <div className="abbrev-list">
                {cat.items.map(item => (
                  <span className="abbrev-chip" key={item.abbr}>
                    <span className="abbrev-chip__abbr">{item.abbr}</span>
                    <span className="abbrev-chip__meaning">= {item.meaning}</span>
                  </span>
                ))}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}