'use client';

const DEFAULT_CHESSMAN_SRC = '/chessman/default.png';

/** 주사위판 그리드 위에 올리는 말 표시. public/chessman/*.png 로 커스텀 가능. */
export default function ChessmanPiece({
  x,
  y,
  hopKey,
  src = DEFAULT_CHESSMAN_SRC,
}: {
  x: number;
  y: number;
  /** 칸이 바뀔 때마다 증가시켜 hop 애니메이션을 다시 재생한다. */
  hopKey: number;
  /** public/chessman 하위 이미지 경로. 기본값: /chessman/default.png */
  src?: string;
}) {
  return (
    <div
      aria-label="chessman"
      style={{
        gridColumn: x + 1,
        gridRow: y + 1,
        zIndex: 5,
        pointerEvents: 'none',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        key={hopKey}
        src={src}
        alt="chessman"
        draggable={false}
        className="drinkmarble-chessman-token"
        style={{
          width: '58%',
          height: '58%',
          minWidth: 22,
          minHeight: 22,
          objectFit: 'contain',
          filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.35))',
          animation: hopKey > 0 ? 'drinkmarble-chessman-hop 220ms ease-out' : undefined,
        }}
      />
    </div>
  );
}