import type { Mensaje } from '../types'

function Burbuja({ mensaje }: { mensaje: Mensaje }) {
  const esUsuario = mensaje.rol === 'user'
  return (
    <div className={`flex ${esUsuario ? 'justify-end' : 'justify-start'}`}>
      <div className={`max-w-[80%] ${esUsuario ? 'text-right' : 'text-left'}`}>
        <div
          className={`inline-block whitespace-pre-wrap px-4 py-3 text-sm leading-relaxed ${
            esUsuario ? 'bg-accent text-white' : 'bg-neutral-100 text-neutral-900'
          }`}
        >
          {mensaje.contenido}
        </div>
        {!esUsuario && mensaje.fuentes.length > 0 && (
          <div className="mt-2 flex flex-wrap gap-2">
            {mensaje.fuentes.map((f) => (
              <span
                key={f.titulo}
                title={`Relevancia: ${(f.score * 100).toFixed(0)}%`}
                className="border border-neutral-300 px-2 py-1 text-xs font-bold uppercase tracking-widest text-neutral-500"
              >
                {f.titulo}
              </span>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}

export default Burbuja