'use client'

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

interface ScreenListProps {
  screens: ScreenDefinition[]
  colors: Record<string, { bg: string; border: string; text: string }>
  labels: Record<string, string>
  baseUrl: string
  selectedCategory: string | null
  onSelectScreen: (screen: ScreenDefinition) => void
}

export function ScreenList({
  screens,
  colors,
  labels,
  baseUrl,
  selectedCategory,
  onSelectScreen,
}: ScreenListProps) {
  const filtered = selectedCategory
    ? screens.filter(s => s.category === selectedCategory)
    : screens

  return (
    <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
      <div className="px-4 py-3 bg-slate-50 border-b flex items-center justify-between">
        <h3 className="font-medium text-slate-700">
          Alle Screens ({screens.length})
        </h3>
        <span className="text-xs text-slate-400">{baseUrl}</span>
      </div>
      <div className="divide-y max-h-80 overflow-y-auto">
        {filtered.map((screen) => {
          const catColors = colors[screen.category] || { bg: '#f1f5f9', border: '#94a3b8', text: '#475569' }
          return (
            <button
              key={screen.id}
              onClick={() => onSelectScreen(screen)}
              className="w-full flex items-center gap-4 p-3 hover:bg-slate-50 transition-colors text-left"
            >
              <span
                className="w-9 h-9 rounded-lg flex items-center justify-center text-lg"
                style={{ background: catColors.bg }}
              >
                {screen.icon}
              </span>
              <div className="flex-1 min-w-0">
                <div className="font-medium text-slate-800 text-sm">{screen.name}</div>
                <div className="text-xs text-slate-500 truncate">{screen.description}</div>
              </div>
              <span
                className="px-2 py-1 rounded text-xs font-medium shrink-0"
                style={{ background: catColors.bg, color: catColors.text }}
              >
                {labels[screen.category]}
              </span>
            </button>
          )
        })}
      </div>
    </div>
  )
}
