'use client'

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

interface ConnectedScreensListProps {
  selectedNode: string | null
  connectedScreens: ScreenDefinition[]
  colors: Record<string, { bg: string; border: string; text: string }>
  baseUrl: string
}

export function ConnectedScreensList({
  selectedNode,
  connectedScreens,
  colors,
  baseUrl,
}: ConnectedScreensListProps) {
  if (!selectedNode || connectedScreens.length <= 1) return null

  return (
    <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
      <div className="text-sm font-medium text-slate-700 mb-3">Verbundene Screens:</div>
      <div className="flex flex-wrap gap-2">
        {connectedScreens.map((screen) => {
          const catColors = colors[screen.category] || { bg: '#f1f5f9', border: '#94a3b8', text: '#475569' }
          const isCurrentNode = screen.id === selectedNode
          return (
            <button
              key={screen.id}
              onClick={() => {
                if (screen.url) {
                  window.open(`${baseUrl}${screen.url}`, '_blank')
                }
              }}
              className={`px-3 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2 ${
                isCurrentNode ? 'ring-2 ring-primary-500' : ''
              }`}
              style={{
                background: isCurrentNode ? catColors.border : catColors.bg,
                color: isCurrentNode ? 'white' : catColors.text,
              }}
            >
              <span>{screen.icon}</span>
              {screen.name}
            </button>
          )
        })}
      </div>
    </div>
  )
}
