Animated Card Stack

'use client'

import { motion } from 'framer-motion'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'

const cards = [
  { title: 'Card 1', description: 'First card' },
  { title: 'Card 2', description: 'Second card' },
  { title: 'Card 3', description: 'Third card' },
]

export function AnimatedCardStack() {
  return (
    <div className="relative h-64">
      {cards.map((card, index) => (
        <motion.div
          key={index}
          initial={{ scale: 1 - index * 0.05, y: index * 10 }}
          whileHover={{ scale: 1, y: -10 }}
          transition={{ type: 'spring', stiffness: 300, damping: 20 }}
          className="absolute w-64"
          style={{ zIndex: cards.length - index }}
        >
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">{card.title}</CardTitle>
              <CardDescription>{card.description}</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="text-sm">Hover to expand this card</p>
            </CardContent>
          </Card>
        </motion.div>
      ))}
    </div>
  )
}