Magnetic Liquid Button

"use client";

import React, { useState } from "react";
import { MagneticLiquidButton } from "@/components/ui/magnetic-liquid-button";
import { Sparkles, ArrowRight, Zap, Flame, Terminal, Play } from "lucide-react";

export function MagneticLiquidButtonDemo() {
  const [loading, setLoading] = useState(false);

  const handleSimulateAction = () => {
    setLoading(true);
    setTimeout(() => setLoading(false), 2000);
  };

  return (
    <div className="flex min-h-[500px] w-full flex-col items-center justify-center gap-12 bg-neutral-950 p-8 text-neutral-100 selection:bg-violet-500/30">
      {/* Header Info */}
      <div className="flex flex-col items-center gap-2 text-center max-w-md">
        <h2 className="text-2xl font-bold tracking-tight text-white sm:text-3xl">
          Magnetic Liquid Button
        </h2>
        <p className="text-sm text-neutral-400">
          Physics-based magnetic cursor attraction, dynamic spotlight gradient,
          click ripple waves, and multi-variant glow themes.
        </p>
      </div>

      {/* Main Interactive Showcase */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 items-center justify-items-center">
        {/* Cosmic Variant */}
        <MagneticLiquidButton
          variant="cosmic"
          size="lg"
          leftIcon={<Sparkles className="h-4 w-4 text-violet-400" />}
          rightIcon={<ArrowRight className="h-4 w-4 text-fuchsia-400" />}
        >
          Explore Cosmos
        </MagneticLiquidButton>

        {/* Aurora Variant */}
        <MagneticLiquidButton
          variant="aurora"
          size="lg"
          leftIcon={<Zap className="h-4 w-4 text-emerald-400" />}
          rightIcon={<ArrowRight className="h-4 w-4 text-teal-400" />}
        >
          Activate Aurora
        </MagneticLiquidButton>

        {/* Sunset Variant */}
        <MagneticLiquidButton
          variant="sunset"
          size="lg"
          leftIcon={<Flame className="h-4 w-4 text-rose-400" />}
          rightIcon={<ArrowRight className="h-4 w-4 text-orange-400" />}
        >
          Ignite Launch
        </MagneticLiquidButton>

        {/* Electric Variant with Loading Toggle */}
        <MagneticLiquidButton
          variant="electric"
          size="lg"
          isLoading={loading}
          onClick={handleSimulateAction}
          leftIcon={<Play className="h-4 w-4 text-cyan-400 fill-cyan-400/20" />}
        >
          {loading ? "Processing" : "Live Action"}
        </MagneticLiquidButton>

        {/* Cyberpunk Variant */}
        <MagneticLiquidButton
          variant="cyberpunk"
          size="lg"
          leftIcon={<Terminal className="h-4 w-4 text-pink-400" />}
        >
          Deploy Matrix
        </MagneticLiquidButton>

        {/* Glass Variant */}
        <MagneticLiquidButton
          variant="glass"
          size="lg"
          rightIcon={<ArrowRight className="h-4 w-4 text-neutral-300" />}
        >
          Frosted Glass
        </MagneticLiquidButton>
      </div>

      {/* Size Scale Preview */}
      <div className="flex flex-wrap items-center justify-center gap-4 pt-4 border-t border-neutral-800/80">
        <MagneticLiquidButton variant="cosmic" size="sm">
          Small
        </MagneticLiquidButton>
        <MagneticLiquidButton variant="cosmic" size="md">
          Medium
        </MagneticLiquidButton>
        <MagneticLiquidButton variant="cosmic" size="lg">
          Large
        </MagneticLiquidButton>
      </div>
    </div>
  );
}

export default MagneticLiquidButtonDemo;