interface Props {
  /** Exact number of cards the player still holds. */
  count: number;
  /** Row (top player) or column (side players). */
  direction: 'row' | 'col';
  desktop?: boolean;
}

/** Overlapping fan of face-down cards next to an opponent's circle — one card
 *  per card still in their hand, so the stack shrinks as they play. */
export default function FaceDownCards({ count, direction, desktop = false }: Props) {
  const n = Math.max(0, Math.min(count, 8));
  if (n === 0) return null;

  const row = direction === 'row';
  const w = desktop ? 40 : 25;
  const h = desktop ? 56 : 36;
  const overlap = row ? Math.round(w * 0.45) : Math.round(h * 0.5);

  return (
    <div className="flex" style={{ flexDirection: row ? 'row' : 'column' }}>
      {Array.from({ length: n }).map((_, i) => (
        <div
          key={i}
          style={{
            width: w,
            height: h,
            marginLeft: row && i > 0 ? -overlap : 0,
            marginTop: !row && i > 0 ? -overlap : 0,
            zIndex: i,
            background:
              i % 2 === 0
                ? 'linear-gradient(150deg,#1d4a28,#0e2818)'
                : 'linear-gradient(150deg,#1b4424,#0d2616)',
            borderRadius: 3,
            border: '1px solid rgba(201,168,76,.18)',
            boxShadow: '0 2px 6px rgba(0,0,0,.5)',
          }}
        />
      ))}
    </div>
  );
}