import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

"use client";
import React from "react";
import { motion } from "framer-motion";

function Card3DTilt() {
  return (
    <div className="flex justify-center flex-wrap items-center">
      <motion.div
        whileHover={{ rotateX: 5, rotateY: 10 }}
        transition={{ type: "spring", stiffness: 300, damping: 20 }}
        className="w-full max-w-sm rounded-xl bg-white dark:bg-zinc-900 p-6 shadow-lg"
      >
        <h3 className="text-xl font-bold text-black dark:text-white mb-2">
          Tilted Project
        </h3>
        <p className="text-sm text-gray-600 dark:text-gray-300">
          Adds slight 3D effect on hover using Framer Motion.
        </p>
      </motion.div>

      <motion.div
        whileHover={{ rotateX: 3, rotateY: -3 }}
        transition={{ type: "spring", stiffness: 150, damping: 20 }}
        className="bg-white dark:bg-zinc-900 p-6 rounded-lg shadow-xl"
      >
        <h3 className="text-lg font-bold text-black dark:text-white">
          3D Tilt Card
        </h3>
        <p className="text-gray-600 dark:text-gray-300 mt-2">
          Adds depth and interactivity using rotation.
        </p>
      </motion.div>
    </div>
  );
}

export default Card3DTilt;