'use client'

import type { ExcludeRegion } from '@/app/(admin)/ai/ocr-kombi/types'

interface ExcludeRegionsListProps {
  regions: ExcludeRegion[]
  onDeleteRegion: (index: number) => void
}

export function ExcludeRegionsList({ regions, onDeleteRegion }: ExcludeRegionsListProps) {
  if (regions.length === 0) return null

  return (
    <div className="bg-red-50 dark:bg-red-900/10 rounded-lg border border-red-200 dark:border-red-800 p-3">
      <h4 className="text-xs font-medium text-red-700 dark:text-red-400 mb-2">
        Ausschlussbereiche ({regions.length}) — Woerter in diesen Bereichen werden nicht erkannt
      </h4>
      <div className="space-y-1">
        {regions.map((region, i) => (
          <div key={i} className="flex items-center gap-3 text-xs">
            <span className="w-3 h-3 rounded-sm flex-shrink-0 bg-red-500/30 border border-red-500" />
            <span className="text-red-700 dark:text-red-400 font-medium">
              {region.label || `Bereich ${i + 1}`}
            </span>
            <span className="font-mono text-red-600/70 dark:text-red-400/70">
              {region.w}x{region.h}px @ ({region.x}, {region.y})
            </span>
            <button
              onClick={() => onDeleteRegion(i)}
              className="ml-auto text-red-500 hover:text-red-700 dark:hover:text-red-300"
            >
              Entfernen
            </button>
          </div>
        ))}
      </div>
    </div>
  )
}