1"use client";
2import type React from "react";
3import { useState, useEffect } from "react";
4import { cn } from "@/lib/utils";
5
6export interface CyberpunkCardProps
7  extends React.HTMLAttributes<HTMLDivElement> {
8  theme?:
9    | "neon-blue"
10    | "neon-pink"
11    | "neon-green"
12    | "neon-orange"
13    | "neon-purple"
14    | "custom";
15  customColors?: {
16    primary: string;
17    secondary: string;
18    accent: string;
19  };
20  borderStyle?: "solid" | "dashed" | "glitch" | "corners";
21  colorShift?: boolean;
22  lightTrail?: boolean;
23  rounded?: "none" | "sm" | "md" | "lg";
24  glow?: boolean;
25  glowIntensity?: 1 | 2 | 3 | 4 | 5;
26  children: React.ReactNode;
27}
28
29export const CyberpunkCard = ({
30  theme = "neon-blue",
31  customColors,
32  borderStyle = "solid",
33  colorShift = true,
34  lightTrail = true,
35  rounded = "md",
36  glow = true,
37  glowIntensity = 3,
38  className,
39  children,
40  ...props
41}: CyberpunkCardProps) => {
42  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
43  const [isHovered, setIsHovered] = useState(false);
44  const [colorPhase, setColorPhase] = useState(0);
45
46  useEffect(() => {
47    if (!colorShift || !isHovered) return;
48
49    const interval = setInterval(() => {
50      setColorPhase((prev) => (prev + 1) % 100);
51    }, 50);
52
53    return () => clearInterval(interval);
54  }, [colorShift, isHovered]);
55
56  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
57    if (!lightTrail) return;
58
59    const rect = e.currentTarget.getBoundingClientRect();
60    setMousePosition({
61      x: e.clientX - rect.left,
62      y: e.clientY - rect.top,
63    });
64  };
65
66  const handleMouseEnter = () => {
67    setIsHovered(true);
68  };
69
70  const handleMouseLeave = () => {
71    setIsHovered(false);
72  };
73
74  const themeColors = {
75    "neon-blue": {
76      primary: "from-blue-500 to-cyan-400",
77      secondary: "from-blue-600 to-cyan-500",
78      accent: "bg-blue-400",
79      text: "text-blue-50",
80      glow: "shadow-blue-500/50",
81    },
82    "neon-pink": {
83      primary: "from-pink-500 to-purple-400",
84      secondary: "from-pink-600 to-purple-500",
85      accent: "bg-pink-400",
86      text: "text-pink-50",
87      glow: "shadow-pink-500/50",
88    },
89    "neon-green": {
90      primary: "from-green-500 to-emerald-400",
91      secondary: "from-green-600 to-emerald-500",
92      accent: "bg-green-400",
93      text: "text-green-50",
94      glow: "shadow-green-500/50",
95    },
96    "neon-orange": {
97      primary: "from-orange-500 to-amber-400",
98      secondary: "from-orange-600 to-amber-500",
99      accent: "bg-orange-400",
100      text: "text-orange-50",
101      glow: "shadow-orange-500/50",
102    },
103    "neon-purple": {
104      primary: "from-purple-500 to-indigo-400",
105      secondary: "from-purple-600 to-indigo-500",
106      accent: "bg-purple-400",
107      text: "text-purple-50",
108      glow: "shadow-purple-500/50",
109    },
110    custom: {
111      primary: customColors
112        ? `from-[${customColors.primary}] to-[${customColors.secondary}]`
113        : "from-blue-500 to-cyan-400",
114      secondary: customColors
115        ? `from-[${customColors.secondary}] to-[${customColors.primary}]`
116        : "from-blue-600 to-cyan-500",
117      accent: customColors ? `bg-[${customColors.accent}]` : "bg-blue-400",
118      text: "text-gray-50",
119      glow: customColors
120        ? `shadow-[${customColors.primary}]/50`
121        : "shadow-blue-500/50",
122    },
123  };
124
125  const currentTheme = themeColors[theme];
126
127  const borderStyles = {
128    solid: "border-2",
129    dashed: "border-2 border-dashed",
130    glitch:
131      "before:content-[''] before:absolute before:inset-0 before:border-2 before:translate-x-1 before:translate-y-1 before:border-white/30 before:z-[-1]",
132    corners:
133      "border-0 before:content-[''] before:absolute before:w-8 before:h-8 before:border-t-2 before:border-l-2 before:top-0 before:left-0 after:content-[''] after:absolute after:w-8 after:h-8 after:border-b-2 after:border-r-2 after:bottom-0 after:right-0",
134  };
135
136  const roundedStyles = {
137    none: "rounded-none",
138    sm: "rounded-sm",
139    md: "rounded-md",
140    lg: "rounded-lg",
141  };
142
143  const glowIntensityStyles = {
144    1: "shadow-md",
145    2: "shadow-lg",
146    3: "shadow-xl",
147    4: "shadow-2xl",
148    5: "shadow-2xl shadow-lg",
149  };
150
151  return (
152    <div
153      className={cn(
154        "relative p-6 border transition-all duration-300 overflow-hidden",
155        `bg-gradient-to-r ${currentTheme.primary}`,
156        borderStyles[borderStyle],
157        roundedStyles[rounded],
158        glow && glowIntensityStyles[glowIntensity],
159        glow && currentTheme.glow,
160        currentTheme.text,
161        className
162      )}
163      style={{
164        borderColor:
165          colorShift && isHovered
166            ? `hsl(${(colorPhase * 3.6) % 360}, 100%, 70%)`
167            : undefined,
168      }}
169      onMouseMove={handleMouseMove}
170      onMouseEnter={handleMouseEnter}
171      onMouseLeave={handleMouseLeave}
172      {...props}
173    >
174      {lightTrail && isHovered && (
175        <div
176          className="absolute w-24 h-24 rounded-full bg-white/20 blur-xl pointer-events-none transition-opacity duration-700"
177          style={{
178            left: mousePosition.x - 48,
179            top: mousePosition.y - 48,
180            opacity: 0.5,
181          }}
182        />
183      )}
184      <div className="relative z-10">{children}</div>
185      <div
186        className={cn(
187          "absolute -bottom-2 -right-2 w-16 h-16 transform rotate-45 opacity-70",
188          currentTheme.accent
189        )}
190      />
191    </div>
192  );
193};
194