'use client'

import { motion } from 'framer-motion'
import { cn } from '@/lib/utils'

interface BentoCardProps {
    children: React.ReactNode
    className?: string
    delay?: number
}

export default function BentoCard({ children, className, delay = 0 }: BentoCardProps) {
    return (
        <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay, ease: "easeOut" }}
            whileHover={{ scale: 1.01, transition: { duration: 0.2 } }}
            className={cn(
                "relative overflow-hidden rounded-2xl bg-white/60 p-6 shadow-xl shadow-slate-200/50 backdrop-blur-xl border border-white/20",
                "hover:shadow-2xl hover:shadow-indigo-500/10 hover:border-indigo-500/20 transition-all",
                className
            )}
        >
            {children}
        </motion.div>
    )
}