import { motion } from "framer-motion";
import type { ReactNode } from "react";

interface CardProps {
  children: ReactNode;
  className?: string;
  animated?: boolean;
  delay?: number;
}

const fadeUp = {
  initial: { y: 10, opacity: 0 },
  animate: { y: 0, opacity: 1 },
} as const;

export default function Card({
  children,
  className = "",
  animated = false,
  delay,
}: CardProps) {
  const cls = `rounded-2xl bg-surface p-4 ring-1 ring-border ${className}`;

  if (animated) {
    return (
      <motion.div
        className={cls}
        {...fadeUp}
        transition={delay ? { delay } : undefined}
      >
        {children}
      </motion.div>
    );
  }

  return <div className={cls}>{children}</div>;
}