'use client';

import type { TranscriptViewerProps } from '@/types/component-props';

export default function TranscriptViewer({
  transcript,
  isLive = false,
}: TranscriptViewerProps) {
  return (
    <div className="bg-white border rounded-lg p-6">
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-lg font-semibold text-gray-900">Transcript</h3>
        {isLive && (
          <span className="inline-flex items-center gap-2 text-sm text-green-600">
            <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
            Live
          </span>
        )}
      </div>
      <div className={`
        prose max-w-none text-gray-700 whitespace-pre-wrap
        ${isLive ? 'animate-pulse' : ''}
      `}>
        {transcript || (
          <p className="text-gray-400 italic">No transcript available yet.</p>
        )}
      </div>
    </div>
  );
}