Neumorphic Glow Tactile CTA Button

"use client";

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

export type NeumorphicGlowShape = "pill" | "squircle";
export type NeumorphicGlowTheme = "default" | "dark" | "uipirate" | "orange" | "cyberpunk";
export type NeumorphicGlowSize = "xs" | "sm" | "md" | "lg" | "xl";

export interface NeumorphicGlowCTAProps {
  label?: string;
  shape?: NeumorphicGlowShape;
  theme?: NeumorphicGlowTheme;
  size?: NeumorphicGlowSize;
  onClick?: () => void;
  className?: string;
}

export function NeumorphicGlowCTA({
  label = "Learn more",
  shape = "pill",
  theme = "default",
  size = "md",
  onClick,
  className = "",
}: NeumorphicGlowCTAProps) {
  const [isHovered, setIsHovered] = useState(false);
  const [isPressed, setIsPressed] = useState(false);

  const themeConfig = {
    default: {
      bg: "bg-[#E6E8ED]",
      border: "border-white/80",
      text: "text-[#3D4450]",
      badgeBg: "bg-[#CBF0CD]",
      arrowColor: "#49C33E",
      badgeGlow: "rgba(73, 195, 62, 0.4)",
    },
    uipirate: {
      bg: "bg-[#181614]",
      border: "border-orange-500/20",
      text: "text-[#FAF5F0]",
      badgeBg: "bg-[#FFEDD5]",
      arrowColor: "#FF5B04",
      badgeGlow: "rgba(255, 91, 4, 0.5)",
    },
    dark: {
      bg: "bg-[#16181F]",
      border: "border-cyan-500/20",
      text: "text-[#E0F2FE]",
      badgeBg: "bg-[#C7F5F8]",
      arrowColor: "#06B6D4",
      badgeGlow: "rgba(6, 182, 212, 0.4)",
    },
  }[theme as "default" | "uipirate" | "dark"] || {
    bg: "bg-[#E6E8ED]",
    border: "border-white/80",
    text: "text-[#3D4450]",
    badgeBg: "bg-[#CBF0CD]",
    arrowColor: "#49C33E",
    badgeGlow: "rgba(73, 195, 62, 0.4)",
  };

  const rounded = shape === "pill" ? "rounded-full" : "rounded-2xl";

  return (
    <motion.button
      type="button"
      onClick={onClick}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => {
        setIsHovered(false);
        setIsPressed(false);
      }}
      onMouseDown={() => setIsPressed(true)}
      onMouseUp={() => setIsPressed(false)}
      animate={{
        y: isPressed ? 2 : isHovered ? -3 : 0,
        scale: isPressed ? 0.98 : 1,
      }}
      transition={{ type: "spring", stiffness: 450, damping: 25 }}
      className={`relative flex items-center justify-between gap-4 px-6 py-3.5 ${rounded} ${themeConfig.bg} ${themeConfig.border} border shadow-lg ${themeConfig.text} font-bold text-sm cursor-pointer select-none focus:outline-none ${className}`}
    >
      <span>{label}</span>

      {/* Radiant Glowing Neon Arrow Knob */}
      <div
        className={`relative w-8 h-8 rounded-full ${themeConfig.badgeBg} flex items-center justify-center`}
        style={{
          boxShadow: `0 0 12px ${themeConfig.badgeGlow}`,
        }}
      >
        <svg
          className="w-4 h-4 transition-transform duration-300"
          style={{ color: themeConfig.arrowColor }}
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M9 5l7 7-7 7" />
        </svg>
      </div>
    </motion.button>
  );
}