import { useEffect } from 'react'

interface HelpPopupProps {
  isOpen: boolean
  onClose: () => void
}

export default function HelpPopup({ isOpen, onClose }: HelpPopupProps) {
  useEffect(() => {
    const handleEscape = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        onClose()
      }
    }

    if (isOpen) {
      document.addEventListener('keydown', handleEscape)
      return () => document.removeEventListener('keydown', handleEscape)
    }
  }, [isOpen, onClose])

  if (!isOpen) return null

  return (
    <div
      className="fixed inset-0 bg-transparent flex items-center justify-center z-50"
      onClick={onClose}
    >
      <div
        className="bg-black border border-white p-8 max-w-md w-full mx-4"
        onClick={e => e.stopPropagation()}
      >
        <div className="flex justify-between items-start mb-6">
          <h2 className="text-xl font-bold text-white">About CoolSoup</h2>
          <button onClick={onClose} className="text-white hover:text-gray-300 text-xl">
            ×
          </button>
        </div>

        <div className="text-white space-y-4">
          <p>
            CoolSoup generates visual patterns and converts them to audio through spectral/additive
            synthesis. Create images using mathematical expressions, waveforms, geometric patterns,
            or upload your own photos, then transform them into sound by treating the image as a
            spectrogram.
          </p>

          <div className="pt-4 border-t border-gray-600">
            <p className="text-sm">
              Created by{' '}
              <a
                href="https://raphaelforment.fr"
                target="_blank"
                rel="noopener noreferrer"
                className="text-white underline hover:text-gray-300"
              >
                Raphaël Forment
              </a>
              {' • License: AGPL-3.0'}
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}