'use client'

import { Icons } from './types'

interface JoinMeetingModalProps {
  isDark: boolean
  currentMeetingUrl: string
  currentMeetingTitle: string
  openInNewTab: () => void
  onClose: () => void
}

export function JoinMeetingModal({
  isDark, currentMeetingUrl, currentMeetingTitle,
  openInNewTab, onClose,
}: JoinMeetingModalProps) {
  return (
    <div className="fixed inset-0 bg-black/90 flex flex-col z-50">
      <div className={`p-4 flex items-center justify-between ${isDark ? 'bg-slate-900' : 'bg-slate-800'}`}>
        <div className="flex items-center gap-4">
          <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-500 rounded-xl flex items-center justify-center text-white font-bold">
            BP
          </div>
          <div>
            <div className="font-medium text-white">{currentMeetingTitle}</div>
            <div className="text-sm text-white/50">BreakPilot Meet</div>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <button
            onClick={openInNewTab}
            className="flex items-center gap-2 px-4 py-2 text-white/70 hover:text-white hover:bg-white/10 rounded-xl transition-colors"
          >
            {Icons.external}
            Im neuen Tab oeffnen
          </button>
          <button
            onClick={onClose}
            className="p-2 text-white/50 hover:text-white hover:bg-white/10 rounded-xl transition-colors"
          >
            {Icons.close}
          </button>
        </div>
      </div>
      <div className="flex-1">
        <iframe
          src={currentMeetingUrl}
          className="w-full h-full border-0"
          allow="camera; microphone; fullscreen; display-capture; autoplay"
          allowFullScreen
        />
      </div>
    </div>
  )
}