'use client'

import { Component } from './types'

interface Action {
  label: string
  onClick: (id: string) => void
  variant: 'primary' | 'danger' | 'neutral'
}

const VARIANT: Record<string, string> = {
  primary: 'text-green-700 border-green-300 hover:bg-green-50',
  danger: 'text-red-700 border-red-300 hover:bg-red-50',
  neutral: 'text-gray-600 border-gray-300 hover:bg-gray-50',
}

// PresenceSection renders a flat list of components in one presence state
// (nicht_vorhanden / geloescht) with the moves the expert can apply to each.
export function PresenceSection({
  title, hint, accent, components, actions,
}: {
  title: string
  hint: string
  accent: string
  components: Component[]
  actions: Action[]
}) {
  if (components.length === 0) return null
  return (
    <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
      <div className={`px-4 py-3 border-l-4 ${accent} bg-gray-50 dark:bg-gray-750`}>
        <h2 className="text-sm font-semibold text-gray-900 dark:text-white">
          {title} <span className="text-gray-400">({components.length})</span>
        </h2>
        <p className="text-xs text-gray-500 dark:text-gray-400">{hint}</p>
      </div>
      <ul className="divide-y divide-gray-100 dark:divide-gray-700">
        {components.map((c) => (
          <li key={c.id} className="flex items-center justify-between gap-3 px-4 py-2.5">
            <div className="min-w-0">
              <span className="text-sm font-medium text-gray-900 dark:text-white">{c.name}</span>
              {c.type && <span className="ml-2 text-xs text-gray-400">{c.type}</span>}
            </div>
            <div className="flex items-center gap-2 shrink-0">
              {actions.map((a) => (
                <button key={a.label} onClick={() => a.onClick(c.id)}
                  className={`px-2.5 py-1 text-xs font-medium border rounded-md transition-colors ${VARIANT[a.variant]}`}>
                  {a.label}
                </button>
              ))}
            </div>
          </li>
        ))}
      </ul>
    </div>
  )
}
