'use client'

import Image from 'next/image'
import { Player, Team } from '@/app/types/team'

export type CardWidth =
  | 'sm'   // max-w-sm   (24rem)
  | 'md'   // max-w-md   (28rem)
  | 'lg'   // max-w-lg   (32rem)
  | 'xl'   // max-w-xl   (36rem)
  | '2xl'  // max-w-2xl  (42rem)
  | 'full' // w-full
  | 'auto' // keine Begrenzung

type Props = {
  player: Player
  team?: Team            // aktuell nicht genutzt, aber falls du später z. B. Team‑Farbe brauchst
  align?: 'left' | 'right'
  maxWidth?: CardWidth
}

export default function PlayerCard({
  player,
  team,
  align = 'left',
  maxWidth = 'sm',
}: Props) {
  /* --- Hilfs‑Klassen ----------------------------------------------------- */

  const widthClasses: Record<CardWidth, string> = {
    sm:   'max-w-sm',
    md:   'max-w-md',
    lg:   'max-w-lg',
    xl:   'max-w-xl',
    '2xl':'max-w-2xl',
    full: 'w-full',
    auto: '',            // keine Begrenzung
  }

  // Linksbündig = Karte nach links schieben, Rechtsbündig = nach rechts
  const alignClasses =
    align === 'right'
      ? 'ml-auto'
      : align === 'left'
      ? 'mr-auto'
      : 'mx-auto'

  // Für den Flex‑Container innen:
  //  * links:  Avatar – Name   (row)
  //  * rechts: Name   – Avatar (row‑reverse)
  const rowDir = align === 'right' ? 'flex-row-reverse text-right' : ''

  const avatarSrc = player.avatar || '/default-avatar.png'

  /* --- Rendering --------------------------------------------------------- */

  return (
    <div
      className={`
        flex flex-col bg-white border border-gray-200 shadow-2xs rounded-xl
        dark:bg-neutral-900 dark:border-neutral-700 dark:shadow-neutral-700/70
        ${alignClasses} ${widthClasses[maxWidth]}
      `}
    >
      <div className="p-2 md:p-4">
        <div className={`flex items-center gap-3 ${rowDir}`}>
          <Image
            src={avatarSrc}
            alt={player.name}
            width={48}
            height={48}
            className="rounded-full shrink-0 border object-cover"
          />
          <span className="whitespace-nowrap overflow-hidden text-ellipsis">
            {player.name}
          </span>
        </div>
      </div>
    </div>
  )
}