import React from 'react';

interface ScriptViewProps {
  script: string;
}

const ScriptView: React.FC<ScriptViewProps> = ({ script }) => {
  if (!script) return null;

  // Simple parsing to split dialog lines
  // Assuming strict format from prompt: "Name: Text"
  const lines = script.split('\n').filter(line => line.trim() !== '');

  return (
    <div className="mt-8 w-full max-w-2xl mx-auto">
      <h3 className="text-xl font-bold text-white mb-4 px-2">Transcript</h3>
      <div className="bg-gray-800 rounded-xl border border-gray-700 p-6 space-y-4 max-h-[500px] overflow-y-auto">
        {lines.map((line, index) => {
          const parts = line.split(':');
          if (parts.length < 2) return <p key={index} className="text-gray-400 italic text-sm">{line}</p>;
          
          const speaker = parts[0].trim();
          const text = parts.slice(1).join(':').trim();
          const isHost1 = speaker.toLowerCase().includes('alex');

          return (
            <div key={index} className={`flex ${isHost1 ? 'justify-start' : 'justify-end'}`}>
              <div 
                className={`max-w-[85%] rounded-2xl px-4 py-3 ${
                    isHost1 
                    ? 'bg-gray-700 rounded-tl-none border-l-4 border-blue-500' 
                    : 'bg-gray-900 rounded-tr-none border-r-4 border-green-500'
                }`}
              >
                <div className={`text-xs font-bold mb-1 ${isHost1 ? 'text-blue-400' : 'text-green-400'}`}>
                    {speaker}
                </div>
                <p className="text-gray-200 text-sm leading-relaxed">
                  {text}
                </p>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default ScriptView;