import { motion } from 'framer-motion';

export const positions: Record<number, string> = {
  0: '1 er',
  1: '2 ème',
  2: '3 ème'
};

export default function PodiumStep({
  podium,
  group,
  index
}: {
  podium: any;
  group: any;
  index: number;
}) {
  return (
    <div className="flex flex-col items-center">
      <motion.div
        custom={index}
        initial="hidden"
        animate="visible"
        variants={{
          visible: () => ({
            opacity: 1,
            transition: {
              delay: podium.length - group.place + 1,
              duration: 0.75
            }
          }),
          hidden: { opacity: 0 }
        }}
        className="w-16 items-center justify-center text-center"
      >
        <span className="font-semibold text-white">{group.name}</span>
      </motion.div>
      <motion.div
        custom={index}
        initial="hidden"
        animate="visible"
        variants={{
          visible: () => ({
            height: 200 * ((podium.length - group.place) / podium.length),
            opacity: 2,
            transition: {
              delay: podium.length - group.place,
              duration: 1.25,
              ease: 'backInOut'
            }
          }),
          hidden: { opacity: 0, height: 0 }
        }}
        className="flex w-16 cursor-pointer place-content-center rounded-t-lg bg-brand shadow-lg hover:bg-opacity-80"
        style={{
          marginBottom: -1,
          filter: `opacity(${0.1 + (podium.length - group.place) / podium.length})`
        }}
      >
        <span className="self-end font-semibold text-white">{positions[group.place]}</span>
      </motion.div>
    </div>
  );
}