"use client";

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

interface VolguLogoProps {
  className?: string;
  animated?: boolean;
  variant?: "default" | "cyber" | "minimal";
}

export function VolguLogo({
  className = "h-8 w-8",
  animated = false,
  variant = "cyber",
}: VolguLogoProps) {
  if (variant === "minimal") {
    return (
      <div
        className={cn(
          "font-display font-bold text-[var(--color-neon-green)]",
          className
        )}
      >
        V
      </div>
    );
  }

  const LogoSvg = (
    <svg
      viewBox="0 0 198 209"
      className={className}
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
        <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="var(--color-neon-green)" />
          <stop offset="100%" stopColor="var(--color-neon-cyan)" />
        </linearGradient>
        <filter id="logoGlow">
          <feGaussianBlur stdDeviation="2" result="coloredBlur" />
          <feMerge>
            <feMergeNode in="coloredBlur" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
      </defs>
      <g
        transform="translate(0,209) scale(0.1,-0.1)"
        fill={variant === "cyber" ? "url(#logoGradient)" : "var(--color-neon-green)"}
        stroke="none"
        filter={variant === "cyber" ? "url(#logoGlow)" : undefined}
      >
        <path d="M1940 2084 c-8 -2 -433 -51 -945 -109 -512 -58 -945 -108 -963 -111
-26 -4 -32 -10 -32 -29 0 -22 5 -25 35 -25 55 0 140 -37 193 -85 61 -55 99
-118 245 -412 144 -288 171 -317 102 -113 -38 113 -44 182 -19 218 19 27 39
28 82 2 18 -11 37 -18 41 -15 5 2 9 42 9 87 1 90 12 130 44 166 32 33 75 29
116 -10 27 -26 36 -30 40 -18 3 8 24 35 48 60 37 39 47 45 84 45 35 0 47 -6
72 -34 31 -35 33 -52 13 -148 l-7 -33 43 0 c54 0 104 -29 113 -65 10 -38 -25
-104 -91 -175 l-54 -58 31 -7 c40 -9 64 -45 55 -83 -10 -49 -60 -85 -174 -126
-94 -33 -129 -55 -110 -67 8 -5 22 -9 31 -9 21 0 41 -35 34 -58 -8 -24 -54
-50 -105 -58 -38 -6 -40 -8 -26 -24 8 -9 15 -26 15 -37 0 -26 -54 -73 -82 -73
-15 0 -19 -5 -15 -19 2 -11 65 -164 138 -340 l134 -321 30 0 c29 0 32 4 97
158 37 86 236 551 443 1032 206 481 375 880 375 887 0 13 -10 14 -40 7z" />
      </g>
    </svg>
  );

  if (animated) {
    return (
      <motion.div
        animate={{
          filter: [
            "drop-shadow(0 0 5px var(--color-neon-green))",
            "drop-shadow(0 0 15px var(--color-neon-green))",
            "drop-shadow(0 0 5px var(--color-neon-green))",
          ],
        }}
        transition={{ duration: 2, repeat: Infinity }}
      >
        {LogoSvg}
      </motion.div>
    );
  }

  return LogoSvg;
}

// Brand text component for the navbar
export function CyberBrandText({ className }: { className?: string }) {
  return (
    <span className={cn("font-mono text-xl tracking-wider", className)}>
      <span className="text-[var(--color-neon-green)] text-glow-green">&gt;</span>
      <span className="text-[var(--color-neon-cyan)]">VOLGU</span>
      <span className="text-muted-foreground">.</span>
      <span className="text-[var(--color-neon-green)]">CONTESTS</span>
    </span>
  );
}
