'use client';
import styles from './TopPredictions.module.css';

export default function TopPredictions({ predictions }) {
  if (!predictions || predictions.length <= 1) return null;

  const runnersUp = predictions.slice(1, 5);

  return (
    <div className={styles.container}>
      <h4 className={styles.title}>Other Possibilities</h4>
      <ul className={styles.list}>
        {runnersUp.map((pred, index) => (
          <li 
            key={pred.pokemon_id} 
            className={styles.item}
            style={{ animationDelay: `${index * 100}ms` }}
          >
            <span className={styles.name}>{pred.name}</span>
            <span className={`${styles.prob} mono`}>
              {(pred.confidence * 100).toFixed(1)}%
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}