interface Speaker {
  id: string;
  label: string;
  isActive: boolean;
}

interface SpeakerPanelProps {
  speakers: Speaker[];
}

const SPEAKER_SYMBOLS = ["///", ":::", "***", "###", "+++", "---", "===", "%%%"];

export function SpeakerPanel({ speakers }: SpeakerPanelProps) {
  return (
    <div className="panel h-full p-4 flex flex-col">
      <div className="font-mono text-xs text-[#9bc3ff] tracking-wide uppercase mb-3 pb-2 border-b border-dashed border-[rgba(117,170,252,0.35)]">
        SPEAKERS//
      </div>

      {speakers.length === 0 ? (
        <div className="flex-1 flex items-center justify-center text-[#9bc3ff] text-sm font-mono opacity-60">
          <span>Waiting for speech...</span>
        </div>
      ) : (
        <div className="flex-1 flex flex-col gap-3">
          {speakers.map((speaker, index) => (
            <div
              key={speaker.id}
              className={`flex items-center gap-3 p-3 border ${
                speaker.isActive
                  ? "border-[#3f6fb3] bg-[#0f1c2f]"
                  : "border-[rgba(117,170,252,0.25)] bg-[#0b1423]"
              } transition-colors`}
            >
              <span
                className={`font-mono text-2xl tracking-tighter ${
                  speaker.isActive
                    ? "text-[#75aafc] animate-pulse"
                    : "text-[#3f6fb3]"
                }`}
              >
                {SPEAKER_SYMBOLS[index % SPEAKER_SYMBOLS.length]}
              </span>
              <div className="flex-1">
                <div className="font-mono text-sm text-[#dbe7ff]">
                  {speaker.label}
                </div>
                <div className="font-mono text-xs text-[#9bc3ff]">
                  {speaker.isActive ? "speaking" : "idle"}
                </div>
              </div>
              {speaker.isActive && (
                <div className="w-2 h-2 rounded-full bg-[#75aafc] animate-pulse" />
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}
