nuzlocke-tracker/frontend/src/components/PokemonCard.tsx

import type { EncounterDetail } from '../types'
import { TypeBadge } from './TypeBadge'

export interface PokemonCardProps {
  encounter: EncounterDetail
  showFaintLevel?: boolean | undefined
  onClick?: (() => void) | undefined
}

export function PokemonCard({ encounter, showFaintLevel, onClick }: PokemonCardProps) {
  const { pokemon, currentPokemon, route, nickname, catchLevel, faintLevel, deathCause } = encounter
  const isDead = faintLevel !== null
  const displayPokemon = currentPokemon ?? pokemon
  const isEvolved = currentPokemon !== null

  return (
    <div
      onClick={onClick}
      className={`bg-surface-1 rounded-xl border border-border-default p-4 flex flex-col items-center text-center transition-all ${
        isDead ? 'opacity-50 grayscale' : ''
      } ${onClick ? 'cursor-pointer hover:border-accent-400/30 hover:-translate-y-0.5' : ''}`}
    >
      {displayPokemon.spriteUrl ? (
        <img src={displayPokemon.spriteUrl} alt={displayPokemon.name} className="w-25 h-25" />
      ) : (
        <div className="w-25 h-25 rounded-full bg-surface-3 flex items-center justify-center text-xl font-bold text-text-secondary">
          {displayPokemon.name[0]?.toUpperCase()}
        </div>
      )}

      <div className="mt-2 flex items-center gap-1.5">
        <span
          className={`w-2 h-2 rounded-full shrink-0 ${isDead ? 'bg-status-dead' : 'bg-status-alive'}`}
        />
        <span className="font-semibold text-text-primary text-sm">
          {nickname || displayPokemon.name}
        </span>
      </div>
      {nickname && <div className="text-xs text-text-secondary">{displayPokemon.name}</div>}

      <div className="flex flex-col items-center gap-0.5 mt-1">
        {displayPokemon.types.map((type) => (
          <TypeBadge key={type} type={type} />
        ))}
      </div>

      <div className="text-xs font-mono text-text-secondary mt-1">
        {showFaintLevel && isDead
          ? `Lv. ${catchLevel} → ${faintLevel}`
          : `Lv. ${catchLevel ?? '?'}`}
      </div>

      <div className="text-xs text-text-tertiary mt-0.5">{route.name}</div>

      {isEvolved && (
        <div className="text-[10px] text-text-tertiary mt-0.5">Originally: {pokemon.name}</div>
      )}

      {isDead && deathCause && (
        <div className="text-[10px] italic text-text-tertiary mt-0.5 line-clamp-2">
          {deathCause}
        </div>
      )}
    </div>
  )
}