import React from 'react';
import { Sparkles, Disc } from 'lucide-react';
import { sound } from '../utils/audio';

interface HostNarratorProps {
  message?: string;
  isThinking?: boolean;
}

export const HostNarrator: React.FC<HostNarratorProps> = ({
  message = "¡Hola melómanos y cinéfilos! Bienvenidos a RETRO•RE, la máquina del tiempo de los 70, 80 y 90.",
  isThinking = false,
}) => {
  return (
    <div className="w-full max-w-4xl mx-auto my-3 flex items-start gap-3 bg-[#181520] border border-amber-500/30 p-3.5 sm:p-4 rounded-2xl shadow-lg relative overflow-hidden">
      {/* DJ Host Avatar */}
      <div className="relative shrink-0">
        <div className="w-12 h-12 rounded-full bg-gradient-to-tr from-amber-500 via-orange-500 to-red-500 p-0.5 shadow-md shadow-amber-500/20">
          <div className="w-full h-full bg-[#121016] rounded-full flex items-center justify-center border border-amber-400/40 text-xl">
            🎙️
          </div>
        </div>
        <div className="absolute -bottom-1 -right-1 p-0.5 bg-amber-500 rounded-full text-black">
          <Disc className="w-3 h-3 animate-spin" style={{ animationDuration: '4s' }} />
        </div>
      </div>

      {/* Speech Bubble */}
      <div className="flex-1 min-w-0">
        <div className="flex items-center justify-between gap-2 mb-1">
          <div className="flex items-center gap-1.5">
            <span className="font-righteous text-xs text-amber-400 tracking-wider">
              HOST RETRO•RE
            </span>
            <span className="text-[9px] font-bold text-amber-200/50 bg-amber-950/60 border border-amber-500/20 px-1.5 py-0.5 rounded uppercase">
              DJ / Curador
            </span>
          </div>
        </div>

        <p className="text-xs sm:text-sm text-amber-100/90 leading-relaxed font-medium">
          {isThinking ? (
            <span className="inline-flex items-center gap-2 text-amber-300 animate-pulse">
              <Sparkles className="w-3.5 h-3.5" />
              <span>Consultando los archivos de la máquina del tiempo...</span>
            </span>
          ) : (
            message
          )}
        </p>
      </div>
    </div>
  );
};