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";

type CardProps = {
  title?: string;
  description?: string;
  motionOff?: boolean;
};

export function CardTilt({
  title,
  description,
  motionOff = false,
}: CardProps) {
  return (
    <motion.div
      whileHover={
        !motionOff
          ? { rotateX: 10, rotateY: 10, rotateZ: 2 }
          : { rotateX: 0, rotateY: 0, rotateZ: 0 }
      }
      transition={{ type: "spring", stiffness: 300, damping: 20 }}
      className="flex justify-center flex-wrap items-center border-2 p-3 rounded-3xl bg-gray-200/50 dark:bg-gray-800/50"
    >
      <div className="w-full max-w-sm rounded-2xl border-1 bg-white dark:bg-zinc-900 p-6 shadow-lg">
        <h3 className="text-xl font-bold text-black dark:text-white mb-2">
          {title || "Tilted Project"}
        </h3>
        <p className="text-sm text-gray-600 dark:text-gray-300">
          {description || "Adds slight 3D effect on hover using Framer Motion."}
        </p>
      </div>
    </motion.div>
  );
}