// SortableMiniCard.tsx
'use client'

import { useSortable, defaultAnimateLayoutChanges } from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'
import MiniCard from './MiniCard'
import { Player } from '../types/team'

type Props = {
  player: Player
  currentUserSteamId: string
  teamLeaderSteamId: string | null | undefined
  isAdmin?: boolean
  onKick?: (player: Player) => void
  onPromote?: (steamId: string) => void
  hideOverlay?: boolean
  isDraggingGlobal?: boolean
  matchParentBg?: boolean
}

export default function SortableMiniCard({
  player,
  currentUserSteamId,
  teamLeaderSteamId,
  isAdmin = false,
  onKick,
  onPromote,
  hideOverlay = false,
}: Props) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
  } = useSortable({
    id: player.steamId,
    animateLayoutChanges: defaultAnimateLayoutChanges,
  })

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
  }

  /* Drag-Berechtigung: Leader **oder** Admin  */
  const isDraggable = isAdmin || currentUserSteamId === teamLeaderSteamId

  return (
    <div
      ref={setNodeRef}
      style={style}
      {...attributes}
      className="transition-transform duration-300 ease-in-out"
    >
      <MiniCard
        steamId={player.steamId}
        title={player.name}
        avatar={player.avatar}
        rank={player.premierRank}
        location={player.location}
        isLeader={player.steamId === teamLeaderSteamId}
        draggable={isDraggable}
        onKick={() => onKick?.(player)}
        onPromote={onPromote}
        currentUserSteamId={currentUserSteamId}
        teamLeaderSteamId={teamLeaderSteamId ?? ''}
        isAdmin={isAdmin}
        dragListeners={isDraggable ? listeners : undefined}
        hoverEffect={isDraggable}
        hideOverlay={hideOverlay}
      />
    </div>
  )
}