"use client";

import React from "react";

type GlowCardProps = {
  children: React.ReactNode;
  href?: string;
  className?: string;
  featured?: boolean;
};

export default function GlowCard({
  children,
  
  className = "",
  featured = false,
}: GlowCardProps) {
  return (
    <article
      onMouseMove={(e) => {
        const rect = e.currentTarget.getBoundingClientRect();

        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;

        e.currentTarget.style.setProperty("--mouse-x", `${x}px`);
        e.currentTarget.style.setProperty("--mouse-y", `${y}px`);

        // New 3D tilt
  const rotateX = ((y / rect.height) - 0.5) * -10;
  const rotateY = ((x / rect.width) - 0.5) * 10;

  // Existing hover movement + new 3D tilt
  e.currentTarget.style.transform = `
    perspective(1000px)
    translateY(-3px)
    rotateX(${rotateX}deg)
    rotateY(${rotateY}deg)
  `;
      }}
      onMouseEnter={() => {
        window.dispatchEvent(new Event("card-cursor-enter"));
      }}
      onMouseLeave={(e) => {
  e.currentTarget.style.transform = "";

  window.dispatchEvent(new Event("card-cursor-leave"));
}}
      className={`
        group
        relative
        flex
        flex-col
        overflow-hidden
        rounded-[20px]
        bg-white
        p-7
        shadow-[0_10px_30px_rgba(31,0,33,0.06)]
        transition-all
        duration-100
        hover:shadow-[0_18px_45px_rgba(80,0,74,0.10)]
        sm:p-8
        [transform-style:preserve-3d]

        ${
          featured
            ? "border border-[#ef2b95]"
            : "border border-[#ece6ed]"
        }

        ${className}
      `}
    >
      {/* Soft pink hover glow */}
      <span
        className="
          pointer-events-none
          absolute
          left-[var(--mouse-x)]
          top-[var(--mouse-y)]
          z-0
          h-[180px]
          w-[180px]
          -translate-x-1/2
          -translate-y-1/2
          rounded-full

          bg-[radial-gradient(circle,rgba(220,10,165,0.20)_0%,rgba(157,40,232,0.10)_35%,transparent_70%)]

          opacity-0
          blur-[28px]

          transition-opacity
          duration-300

          group-hover:opacity-100
        "
      />

      {children}
    </article>
  );
}