"use client";
import { motion } from "framer-motion";
import { ReactNode } from "react";
import { twMerge } from "tailwind-merge";
import { clsx, type ClassValue } from "clsx";

// Utilidad para unir clases de Tailwind
function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

interface CardProps {
  children: ReactNode;
  className?: string;
  delay?: number;
  variant?: "white" | "ice" | "navy" | "ocean" | "none";
}

export const Card = ({ 
  children, 
  className = "", 
  delay = 0, 
  variant = "white" 
}: CardProps) => {
  
  const variants = {
    white: "bg-white border-crisp hover:border-sky",
    ice: "bg-ice/20 border-crisp hover:bg-ice/40",
    navy: "bg-navy border-navy text-white",
    ocean: "bg-ocean border-ocean text-white",
    none: "border-crisp"
  };

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.6, delay, ease: [0.22, 1, 0.36, 1] }}
      className={cn(
        "rounded-[32px] border p-10 flex flex-col transition-all duration-500",
        variants[variant],
        className
      )}
    >
      {children}
    </motion.div>
  );
};