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 MovingBorderCard() {
  return (
    <div className="flex justify-center items-center p-12 bg-neutral-50 dark:bg-black min-h-[400px]">
      <motion.div
        whileHover={{ scale: 1.02, rotateX: 2, rotateY: -2 }}
        transition={{ type: "spring", stiffness: 400, damping: 25 }}
        className="group relative h-[340px] w-full max-w-[300px] perspective-1000"
      >
        <div className="absolute -inset-4 bg-neutral-400/20 dark:bg-white/5 blur-[40px] opacity-0 group-hover:opacity-100 transition-opacity duration-700 -z-10" />

        <div className="relative h-full w-full overflow-hidden rounded-[24px] p-[1px] bg-neutral-200 dark:bg-neutral-800">
          <div className="absolute inset-[-200%] animate-[spin_4s_linear_infinite] opacity-0 group-hover:opacity-100 transition-opacity duration-500">
            <div
              className="h-full w-full bg-[conic-gradient(from_0deg,transparent_0,transparent_40%,#000_50%,transparent_60%,transparent_100%)] 
              dark:bg-[conic-gradient(from_0deg,transparent_0,transparent_40%,#fff_50%,transparent_60%,transparent_100%)]"
            />
          </div>

          <div className="relative z-10 h-full w-full overflow-hidden rounded-[23px] bg-white dark:bg-neutral-950 flex flex-col p-7">
            <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-neutral-300 dark:via-neutral-700 to-transparent" />

            <div className="absolute inset-0 opacity-[0.03] dark:opacity-[0.05] pointer-events-none bg-[url('https://grainy-gradients.vercel.app/noise.svg')]" />

            <div className="flex-1">
              <div className="mb-6 flex h-10 w-10 items-center justify-center rounded-full border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900 shadow-inner">
                <div className="h-2 w-2 rounded-full bg-black dark:bg-white animate-pulse" />
              </div>

              <h3 className="text-lg font-bold tracking-tight text-black dark:text-white uppercase">
                Man on Fire
              </h3>

              <div className="mt-2 h-px w-8 bg-black dark:bg-white transition-all duration-500 group-hover:w-16" />

              <p className="mt-4 text-xs leading-relaxed text-neutral-500 dark:text-neutral-400 font-medium italic">
                Forgiveness is between them and God. It's my job to arrange the
                meeting.
              </p>
            </div>

            <div className="mt-auto pt-6 border-t border-neutral-100 dark:border-neutral-900 flex items-end justify-between">
              <div>
                <p className="text-[10px] uppercase tracking-tighter text-neutral-400">
                  Ver.
                </p>
                <p className="text-xs font-mono font-bold text-black dark:text-white">
                  04.2004
                </p>
              </div>

              <button className="group/btn relative overflow-hidden rounded-lg bg-black dark:bg-white px-5 py-2 text-[10px] font-black uppercase tracking-widest text-white dark:text-black transition-all hover:pr-8 active:scale-95">
                <span className="relative z-10">Details</span>
                <span className="absolute right-2 opacity-0 group-hover/btn:opacity-100 transition-all duration-300">
                  →
                </span>
                <div className="absolute inset-0 bg-gradient-to-tr from-white/10 to-transparent dark:from-black/10" />
              </button>
            </div>
          </div>
        </div>
      </motion.div>
    </div>
  );
}

export default MovingBorderCard;