"use client";

import React from "react";
import { cn } from "@/lib/utils";

interface NeonBorderProps {
  children: React.ReactNode;
  className?: string;
  color?: "green" | "cyan" | "purple" | "pink" | "multi";
  animated?: boolean;
  corners?: boolean;
}

const colorStyles = {
  green: "border-[var(--color-neon-green)] shadow-[var(--glow-green)]",
  cyan: "border-[var(--color-neon-cyan)] shadow-[var(--glow-cyan)]",
  purple: "border-[var(--color-neon-purple)] shadow-[var(--glow-purple)]",
  pink: "border-[var(--color-neon-pink)] shadow-[var(--glow-pink)]",
  multi: "",
};

export function NeonBorder({
  children,
  className,
  color = "green",
  animated = false,
  corners = false,
}: NeonBorderProps) {
  return (
    <div
      className={cn(
        "relative border bg-card/50 backdrop-blur-sm",
        color !== "multi" && colorStyles[color],
        animated && "animate-neon-border-pulse",
        corners && "corner-accent",
        className
      )}
    >
      {/* Multi-color gradient border */}
      {color === "multi" && (
        <div
          className="absolute inset-0 -z-10 rounded-[inherit] p-[1px]"
          style={{
            background:
              "linear-gradient(45deg, var(--color-neon-green), var(--color-neon-cyan), var(--color-neon-purple), var(--color-neon-pink))",
            backgroundSize: animated ? "400% 400%" : "100% 100%",
            animation: animated ? "gradient-rotate 4s linear infinite" : "none",
          }}
        >
          <div className="h-full w-full rounded-[inherit] bg-card" />
        </div>
      )}
      {children}
    </div>
  );
}