Follow-through

import { motion, useReducedMotion, type Variants } from 'motion/react';

// A loosely damped spring overshoots and settles on its own: with these
// numbers the tag swings about 15 degrees past center before it rests.
const SWING = { type: 'spring', stiffness: 200, damping: 8 } as const;
const TRAIL_ANGLE = 36; // how far the tag lags while the card is moving

const card: Variants = {
  hidden: { opacity: 0, x: -60 },
  show: { opacity: 1, x: 0, transition: { duration: 0.4, ease: 'easeOut' } }
};

type ProductCardProps = { name: string; price: string; image: string };

export function ProductCard({ name, price, image }: ProductCardProps) {
  const reduceMotion = useReducedMotion();
  const tag: Variants = {
    hidden: { rotate: reduceMotion ? 0 : TRAIL_ANGLE },
    show: {
      rotate: 0,
      transition: reduceMotion ? { duration: 0 } : { ...SWING, delay: 0.15 }
    }
  };

  return (
    <motion.article
      variants={card}
      initial='hidden'
      whileInView='show'
      viewport={{ once: true }}
      className='relative w-60 rounded-2xl border bg-background p-3'
    >
      <img
        src={image}
        alt=''
        className='aspect-square w-full rounded-xl object-cover'
      />
      <h3 className='mt-3 text-sm font-medium'>{name}</h3>
      <p className='text-sm text-muted-foreground'>{price}</p>
      {/* The tag hangs from the card's bottom edge and pivots at its string. */}
      <motion.div
        variants={tag}
        className='absolute top-full right-6 flex origin-top flex-col items-center'
      >
        <span className='h-4 w-px bg-foreground/40' />
        <span className='rounded-md bg-red-500 px-2 py-1 text-xs font-semibold text-white'>
          Sale
        </span>
      </motion.div>
    </motion.article>
  );
}