// MiniCardDummy.tsx
'use client'

import { useDroppable } from "@dnd-kit/core"

type MiniCardDummyProps = {
  title: string
  onClick?: () => void
  children?: React.ReactNode
  zoneId?: string
}

export default function MiniCardDummy({ title, onClick, children, zoneId }: MiniCardDummyProps) {
  const { setNodeRef, isOver } = useDroppable({
    id: `${zoneId ?? 'dummy'}-drop`,
    data: { containerId: zoneId, role: 'dummy' }, // ⬅️ wichtig für Zone-Highlight
  })


  return (
    <div
      ref={setNodeRef}
      onClick={onClick}
      className={`
        relative flex flex-col h-full max-h-[200px] max-w-[160px] items-center p-4 border border-dashed rounded-lg transition
        hover:border-blue-400 dark:hover:border-blue-400 hover:cursor-pointer
        border-gray-300 dark:border-neutral-700
      `}
    >
      <div className="flex flex-col items-center">
        <div className="relative w-16 h-16 mb-2 flex items-center justify-center overflow-hidden rounded-full bg-gray-100 dark:bg-neutral-800">
          {children ? (
            children
          ) : (
            <img
              src="https://via.placeholder.com/64x64.png?text=+"
              alt="Dummy Avatar"
              className="w-16 h-16 object-cover"
            />
          )}
        </div>

        <span className="text-sm text-blue-600 dark:text-blue-400 underline text-center mt-1 truncate max-w-[100px] w-full block">
          {title}
        </span>
      </div>

      {/* reserviere Platz für Flagge oder Button, auch wenn leer */}
      <div className="mt-2 w-full flex justify-center min-h-[16px] relative" />
    </div>
  )
}