import { Citation } from '../hooks/useChatStream'
import './CitationsPanel.css'

interface CitationsPanelProps {
  citations: Citation[]
  isOpen: boolean
  onClose: () => void
}

export default function CitationsPanel({ citations, isOpen, onClose }: CitationsPanelProps) {
  if (!isOpen || citations.length === 0) return null

  return (
    <>
      <button
        type="button"
        className="citations-overlay"
        onClick={onClose}
        aria-label="Close citations panel"
      />
      <aside className="citations-panel">
        <div className="citations-header">
          <h3>Sources</h3>
          <button type="button" className="close-button" onClick={onClose}>×</button>
        </div>
        <div className="citations-list">
          {citations.map((citation, index) => (
            <div key={citation.id} className="citation-item">
              <div className="citation-number">[{index + 1}]</div>
              <div className="citation-content">
                <div className="citation-source">{citation.citation}</div>
                <div className="citation-text">{citation.text}</div>
                {citation.tags && citation.tags.length > 0 && (
                  <div className="citation-tags">
                    {citation.tags.map(tag => (
                      <span key={tag} className="citation-tag">{tag}</span>
                    ))}
                  </div>
                )}
              </div>
            </div>
          ))}
        </div>
      </aside>
    </>
  )
}
