// /src/app/[locale]/components/MatchPlayerCard.tsx

import Table from './Table'
import Image from 'next/image'
import { MatchPlayer } from '../../../types/match'

type Props = {
  player: MatchPlayer
}

/** Safeties für optionale/lockere Stats-Felder */
type StatsShape = {
  adr?: unknown
  hsPercent?: unknown
}

function getAdr(stats: unknown): number | null {
  if (stats && typeof stats === 'object') {
    const v = (stats as StatsShape).adr
    return typeof v === 'number' ? v : null
  }
  return null
}

function getHsPercent(stats: unknown): number | null {
  if (stats && typeof stats === 'object') {
    const v = (stats as StatsShape).hsPercent
    return typeof v === 'number' ? v : null
  }
  return null
}

export default function MatchPlayerCard({ player }: Props) {
  const adr = getAdr(player.stats)
  const hsPercent = getHsPercent(player.stats)

  return (
    <Table.Row>
      <Table.Cell hoverable className="w-[48px] p-1 text-center align-middle whitespace-nowrap">
        <Image
          className="rounded-full shrink-0 border object-cover"
          alt={`Avatar von ${player.user.name}`}
          src={player.user.avatar}
          width={40}
          height={40}
        />
      </Table.Cell>

      <Table.Cell hoverable className="whitespace-nowrap font-medium">
        {player.user.name}
      </Table.Cell>

      <Table.Cell hoverable>{player.stats?.kills ?? '-'}</Table.Cell>
      <Table.Cell hoverable>{player.stats?.deaths ?? '-'}</Table.Cell>
      <Table.Cell hoverable>{player.stats?.assists ?? '-'}</Table.Cell>
      <Table.Cell hoverable>{adr ?? '-'}</Table.Cell>
      {/* Falls du kein HS% hast, kannst du diese Spalte auch entfernen oder nochmals ADR zeigen */}
      <Table.Cell hoverable>{hsPercent ?? '-'}</Table.Cell>

      <Table.Cell className="text-end">
        <button
          type="button"
          className="text-blue-600 hover:text-blue-800 dark:text-blue-500 dark:hover:text-blue-400"
        >
          Details
        </button>
      </Table.Cell>
    </Table.Row>
  )
}