"use client";

import { ReactNode, useState } from "react";
import { motion } from "framer-motion";

interface GlassCardProps {
  children: ReactNode;
  className?: string;
  hover?: boolean;
  glow?: boolean;
  delay?: number;
}

export function GlassCard({ children, className = "", hover = true, glow = false, delay = 0 }: GlassCardProps) {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.6, delay }}
      onHoverStart={() => hover && setIsHovered(true)}
      onHoverEnd={() => hover && setIsHovered(false)}
      className={`
        relative overflow-hidden
        bg-gradient-to-br from-obsidian/40 to-void-black/40
        backdrop-blur-xl
        -webkit-backdrop-blur-xl
        border border-white/5
        rounded-2xl
        p-8
        transition-all duration-500
        ${hover ? 'hover:border-electric-cyan/20 hover:shadow-glow-cyan' : ''}
        ${glow ? 'shadow-glow-cyan' : ''}
        ${isHovered ? 'scale-[1.02]' : 'scale-100'}
        ${className}
      `}
    >
      {/* Ambient glow effect */}
      <div className="absolute inset-0 bg-gradient-to-br from-electric-cyan/5 to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />

      {children}
    </motion.div>
  );
}