frontend/src/components/reference/SmartPhrasesPanel.jsx

import { getTemplateData } from '../../data/templateData';
import { FileText, Copy, ChevronDown } from 'lucide-react';
import { useState } from 'react';
import toast from 'react-hot-toast';

export default function SmartPhrasesPanel() {
  const [isOpen, setIsOpen] = useState(false);
  const SMART_PHRASES = getTemplateData()?.smartPhrases || [];

  const handleCopy = (text) => {
    navigator.clipboard.writeText(text).then(() => {
      toast.success('Copied to clipboard');
    });
  };

  return (
    <div className="section" id="section-smart-phrases">
      <div className="section__header" style={{ cursor: 'pointer' }} onClick={() => setIsOpen(!isOpen)}>
        <div className="section__header-icon">
          <FileText size={20} />
        </div>
        <h2 className="section__title">Quick Smart Phrases</h2>
        <span className={`collapsible-trigger__icon ${isOpen ? 'collapsible-trigger__icon--open' : ''}`} style={{ marginLeft: 'auto' }}>
          <ChevronDown size={20} />
        </span>
      </div>

      {isOpen && (
        <div className="smart-phrases__list">
          {SMART_PHRASES.map((phrase, i) => (
            <div
              key={i}
              className="smart-phrase"
              onClick={() => handleCopy(phrase)}
              title="Click to copy"
            >
              <span className="smart-phrase__number">{i + 1}.</span>
              <span>{phrase}</span>
              <span className="smart-phrase__copy">
                <Copy size={14} />
              </span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}