export type TabType = 'comments' | 'banners' | 'brand' | 'style' | 'notes' | 'participants' | 'chat'

interface TabsColumnProps {
  activeTab: TabType
  onChangeTab: (tab: TabType) => void
  onTogglePanel?: () => void
  isCollapsed?: boolean
}

export function TabsColumn({ activeTab, onChangeTab, onTogglePanel, isCollapsed }: TabsColumnProps) {
  const tabs: { id: TabType; icon: JSX.Element; label: string }[] = [
    {
      id: 'comments',
      label: 'Comentarios',
      icon: (
        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
        </svg>
      ),
    },
    {
      id: 'banners',
      label: 'Banners',
      icon: (
        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z" />
        </svg>
      ),
    },
    {
      id: 'brand',
      label: 'Activos multimedia',
      icon: (
        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
        </svg>
      ),
    },
    {
      id: 'style',
      label: 'Estilo',
      icon: (
        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
        </svg>
      ),
    },
    {
      id: 'notes',
      label: 'Notas',
      icon: (
        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
        </svg>
      ),
    },
    {
      id: 'participants',
      label: 'Personas',
      icon: (
        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
        </svg>
      ),
    },
  ]

  return (
    <div className="w-20 h-full bg-gray-900 flex flex-col items-center py-2 gap-1 border-l-2 border-gray-700">
      {/* Botón de colapso en la parte superior */}
      {onTogglePanel && (
        <button
          onClick={onTogglePanel}
          className="flex flex-col items-center justify-center w-16 h-12 rounded-lg transition-all text-gray-400 hover:bg-gray-800 hover:text-white mb-2"
          title={isCollapsed ? "Expandir panel" : "Colapsar panel"}
        >
          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path 
              strokeLinecap="round" 
              strokeLinejoin="round" 
              strokeWidth={2} 
              d={isCollapsed ? "M15 19l-7-7 7-7" : "M9 5l7 7-7 7"}
            />
          </svg>
        </button>
      )}
      
      {/* Tabs */}
      {tabs.map((tab) => (
        <button
          key={tab.id}
          onClick={() => onChangeTab(tab.id)}
          className={`flex flex-col items-center justify-center w-16 h-16 rounded-lg transition-all ${
            activeTab === tab.id
              ? 'bg-blue-600 text-white shadow-lg'
              : 'text-gray-400 hover:bg-gray-800 hover:text-white'
          }`}
          title={tab.label}
        >
          {tab.icon}
          <span className="text-[10px] mt-1 leading-tight text-center">{tab.label.split(' ')[0]}</span>
        </button>
      ))}
    </div>
  )
}

interface StudioRightPanelProps {
  activeTab: TabType
  onChangeTab: (tab: TabType) => void
}

function StudioRightPanel({ activeTab }: StudioRightPanelProps) {
  return (
    <div className="w-96 bg-gray-900 h-full overflow-y-auto border-r-2 border-gray-700">
      <div className="p-6">
        {activeTab === 'comments' && (
          <div>
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-white font-semibold text-lg">Comentarios</h3>
              <button className="text-gray-400 hover:text-white">
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
                </svg>
              </button>
            </div>
            
            <div className="bg-gray-800 rounded-lg p-4 mb-4">
              <div className="flex items-start gap-2 mb-3">
                <div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center flex-shrink-0">
                  <span className="text-white text-xs font-bold">S</span>
                </div>
                <div className="flex-1">
                  <p className="text-white text-sm font-medium mb-1">Streamford</p>
                  <p className="text-gray-400 text-sm">Personaliza las características en vivo como este es un ejemplo. Haz clic en un comando para mostrarlo en la pantalla.</p>
                </div>
              </div>
              <button className="flex items-center justify-center gap-2 w-full py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors">
                <svg className="w-4 h-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                </svg>
                <span className="text-white text-sm font-medium">Mostrar</span>
              </button>
            </div>

            <div className="border-t border-gray-800 pt-4">
              <div className="relative">
                <input
                  type="text"
                  placeholder="Agrega un destino para publicar comentarios."
                  className="w-full px-4 py-3 bg-gray-800 text-white rounded-lg border border-gray-700 focus:outline-none focus:border-blue-500 pr-10"
                />
                <button className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-blue-500">
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 5l7 7-7 7M5 5l7 7-7 7" />
                  </svg>
                </button>
              </div>
            </div>
          </div>
        )}

        {activeTab === 'banners' && (
          <div>
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center gap-2">
                <button className="text-gray-400 hover:text-white">
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                  </svg>
                </button>
                <h3 className="text-white font-semibold text-lg">Banners de ejemplo</h3>
              </div>
              <button className="text-gray-400 hover:text-white">
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
                </svg>
              </button>
            </div>

            <div className="space-y-3 mb-6">
              <div className="bg-gray-800 rounded-lg p-4 hover:bg-gray-750 transition-colors cursor-pointer">
                <p className="text-white text-sm mb-2">Este es un ejemplo de banner. Haz clic en un banner para mostrarlo en la pantalla.</p>
                <p className="text-gray-400 text-xs">Utiliza banners para resumir los temas de los que estás hablando y mostrar llamadas a la acción</p>
              </div>
              <div className="bg-gray-800 rounded-lg p-4 hover:bg-gray-750 transition-colors cursor-pointer">
                <p className="text-white text-sm font-medium">Banner</p>
              </div>
            </div>

            <button className="flex items-center gap-2 text-gray-400 hover:text-white">
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
              </svg>
              <span className="text-sm">Crear un banner</span>
            </button>
          </div>
        )}

        {activeTab === 'brand' && (
          <div>
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center gap-2">
                <div className="w-8 h-8 bg-gradient-to-br from-pink-500 to-purple-600 rounded-full flex items-center justify-center">
                  <span className="text-white text-sm font-bold">M</span>
                </div>
                <h3 className="text-white font-semibold text-lg">Marca 1</h3>
                <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
              </div>
              <button className="text-gray-400 hover:text-white">
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
                </svg>
              </button>
            </div>

            <div className="space-y-4">
              {/* Logo */}
              <div className="border-b border-gray-800 pb-4">
                <button className="flex items-center justify-between w-full text-left group">
                  <span className="text-white font-medium">Logo</span>
                  <svg className="w-5 h-5 text-gray-400 group-hover:text-white transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                  </svg>
                </button>
              </div>

              {/* Superposición */}
              <div className="border-b border-gray-800 pb-4">
                <button className="flex items-center justify-between w-full text-left group">
                  <span className="text-white font-medium">Superposición</span>
                  <svg className="w-5 h-5 text-gray-400 group-hover:text-white transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                  </svg>
                </button>
              </div>

              {/* Código QR */}
              <div className="border-b border-gray-800 pb-4">
                <button className="flex items-center justify-between w-full text-left group">
                  <span className="text-white font-medium">Código QR</span>
                  <svg className="w-5 h-5 text-gray-400 group-hover:text-white transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                  </svg>
                </button>
              </div>

              {/* Clips de video */}
              <div className="border-b border-gray-800 pb-4">
                <button className="flex items-center justify-between w-full text-left group">
                  <span className="text-white font-medium">Clips de video</span>
                  <svg className="w-5 h-5 text-gray-400 group-hover:text-white transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                  </svg>
                </button>
              </div>

              {/* Fondo */}
              <div className="border-b border-gray-800 pb-4">
                <button className="flex items-center justify-between w-full text-left group">
                  <span className="text-white font-medium">Fondo</span>
                  <svg className="w-5 h-5 text-gray-400 group-hover:text-white transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                  </svg>
                </button>
              </div>

              {/* Sonidos */}
              <div className="border-b border-gray-800 pb-4">
                <button className="flex items-center justify-between w-full text-left group">
                  <span className="text-white font-medium">Sonidos</span>
                  <svg className="w-5 h-5 text-gray-400 group-hover:text-white transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                  </svg>
                </button>
              </div>

              {/* Música de fondo */}
              <div className="pb-4">
                <button className="flex items-center justify-between w-full text-left group">
                  <span className="text-white font-medium">Música de fondo</span>
                  <svg className="w-5 h-5 text-gray-400 group-hover:text-white transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                  </svg>
                </button>
              </div>
            </div>
          </div>
        )}

        {activeTab === 'style' && (
          <div>
            <div className="flex items-center justify-between mb-6">
              <div className="flex items-center gap-2">
                <div className="w-8 h-8 bg-gradient-to-br from-pink-500 to-purple-600 rounded-full flex items-center justify-center">
                  <span className="text-white text-sm font-bold">M</span>
                </div>
                <h3 className="text-white font-semibold text-lg">Marca 1</h3>
                <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
              </div>
              <button className="text-gray-400 hover:text-white">
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
                </svg>
              </button>
            </div>

            {/* Ajustes preestablecidos */}
            <div className="mb-6">
              <button className="flex items-center justify-between w-full text-left mb-3">
                <span className="text-white font-medium">Ajustes preestablecidos</span>
                <svg className="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
              </button>
              <div className="flex gap-3 overflow-x-auto pb-2">
                <div className="flex-shrink-0 w-24 h-24 bg-gray-800 rounded-lg border-2 border-blue-500 flex items-center justify-center cursor-pointer">
                  <div className="text-center">
                    <div className="w-8 h-8 bg-gray-700 rounded-full mx-auto mb-1"></div>
                    <div className="text-xs text-gray-400">Preset 1</div>
                  </div>
                </div>
                <div className="flex-shrink-0 w-24 h-24 bg-gray-800 rounded-lg border-2 border-transparent hover:border-gray-600 flex items-center justify-center cursor-pointer">
                  <div className="text-center">
                    <div className="w-8 h-8 bg-yellow-500 rounded-full mx-auto mb-1"></div>
                    <div className="text-xs text-gray-400">Preset 2</div>
                  </div>
                </div>
                <div className="flex-shrink-0 w-24 h-24 bg-gray-800 rounded-lg border-2 border-transparent hover:border-gray-600 flex items-center justify-center cursor-pointer">
                  <div className="text-center">
                    <div className="w-8 h-8 bg-red-500 rounded-full mx-auto mb-1"></div>
                    <div className="text-xs text-gray-400">Preset 3</div>
                  </div>
                </div>
              </div>
            </div>

            {/* Color de la marca */}
            <div className="mb-6">
              <button className="flex items-center justify-between w-full text-left mb-3">
                <span className="text-white font-medium">Color de la marca</span>
                <svg className="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
              </button>
              <div className="flex items-center gap-3">
                <div className="w-12 h-12 bg-yellow-500 rounded-lg border-2 border-gray-700"></div>
                <input
                  type="text"
                  value="#ffc42c"
                  className="flex-1 px-3 py-2 bg-gray-800 text-white rounded border border-gray-700 focus:outline-none focus:border-blue-500"
                  readOnly
                />
              </div>
            </div>

            {/* Tema */}
            <div className="mb-6">
              <button className="flex items-center justify-between w-full text-left mb-3">
                <span className="text-white font-medium">Tema</span>
                <svg className="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
              </button>
              <div className="grid grid-cols-2 gap-3">
                <button className="p-3 bg-yellow-500 text-gray-900 rounded-lg font-medium hover:bg-yellow-400 transition-colors">
                  Bubble
                </button>
                <button className="p-3 bg-gray-800 text-white rounded-lg font-medium hover:bg-gray-700 transition-colors border border-yellow-500">
                  Classic
                </button>
                <button className="p-3 bg-gray-800 text-white rounded-lg font-medium hover:bg-gray-700 transition-colors">
                  Minimal
                </button>
                <button className="p-3 bg-gray-900 text-white rounded-lg font-medium hover:bg-gray-800 transition-colors border border-yellow-500">
                  Block
                </button>
              </div>
            </div>

            {/* Mostrar nombres */}
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <span className="text-white font-medium">Mostrar nombres</span>
                <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </div>
              <button className="relative inline-flex h-6 w-11 items-center rounded-full bg-blue-600">
                <span className="translate-x-6 inline-block h-4 w-4 transform rounded-full bg-white transition"></span>
              </button>
            </div>
          </div>
        )}

        {activeTab === 'notes' && (
          <div>
            <div className="flex items-center justify-between mb-6">
              <h3 className="text-white font-semibold text-lg">Notas</h3>
              <div className="flex items-center gap-2">
                <button className="p-1.5 text-gray-400 hover:text-white hover:bg-gray-800 rounded">
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                  </svg>
                </button>
                <button className="p-1.5 text-gray-400 hover:text-white hover:bg-gray-800 rounded font-bold">
                  <span>B</span>
                </button>
                <button className="p-1.5 text-gray-400 hover:text-white hover:bg-gray-800 rounded italic">
                  <span>I</span>
                </button>
                <button className="p-1.5 text-gray-400 hover:text-white hover:bg-gray-800 rounded underline">
                  <span>U</span>
                </button>
              </div>
            </div>

            <div className="mb-4">
              <div className="flex items-center gap-2 mb-2">
                <span className="text-white font-medium text-sm">Teleprompter</span>
                <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <svg className="w-4 h-4 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                </svg>
                <div className="ml-auto">
                  <button className="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-700">
                    <span className="translate-x-1 inline-block h-4 w-4 transform rounded-full bg-white transition"></span>
                  </button>
                </div>
              </div>
            </div>

            <textarea
              className="w-full h-64 px-4 py-3 bg-gray-800 text-white rounded-lg border border-gray-700 focus:outline-none focus:border-blue-500 resize-none"
              placeholder="Agrega tus notas aquí..."
            ></textarea>

            <div className="mt-2 text-xs text-gray-500">
              0 palabras • 0 caracteres
            </div>
          </div>
        )}

        {activeTab === 'participants' && (
          <div>
            <div className="mb-6">
              <h3 className="text-white font-semibold text-lg mb-4">Comparte este enlace para invitar a los invitados en vivo</h3>
              <button className="w-full flex items-center justify-center gap-2 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors">
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                </svg>
                <span className="font-medium">Copiar enlace de invitación</span>
              </button>
            </div>

            <div className="border-t border-gray-800 pt-4">
              <button className="flex items-center justify-between w-full text-left mb-4">
                <div className="flex items-center gap-2">
                  <svg className="w-5 h-5 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                  </svg>
                  <span className="text-white font-medium">Escenario • 1 persona</span>
                </div>
                <svg className="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
              </button>

              <div className="bg-gray-800 rounded-lg p-4">
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center flex-shrink-0">
                    <span className="text-white font-bold">CM</span>
                  </div>
                  <div className="flex-1">
                    <p className="text-white font-medium">Cesar Mendivil</p>
                    <div className="flex items-center gap-2 mt-1">
                      <span className="text-xs text-blue-400">Anfitrión</span>
                      <span className="text-xs text-gray-500">480p</span>
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <button className="p-1.5 text-gray-400 hover:text-white">
                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
                      </svg>
                    </button>
                    <button className="text-gray-400 hover:text-white">
                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
                      </svg>
                    </button>
                  </div>
                </div>
                <div className="mt-3 flex items-center gap-2">
                  <div className="flex-1 h-1 bg-gray-700 rounded-full overflow-hidden">
                    <div className="h-full w-2/3 bg-green-500"></div>
                  </div>
                  <label className="flex items-center gap-2 text-xs text-gray-400">
                    <input type="checkbox" className="rounded" defaultChecked />
                    <span>Auto</span>
                  </label>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}

export default StudioRightPanel