"use client";
import { motion } from "framer-motion";

export function LiquidButton() {
  return (
    <div className="flex items-center justify-center w-full h-40 bg-[#0a0a0a] rounded-xl border border-border relative">
      <svg className="absolute w-0 h-0">
        <defs>
          <filter id="goo">
            <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
          </filter>
        </defs>
      </svg>
      <div style={{ filter: "url('#goo')" }} className="relative flex items-center justify-center">
        <button className="relative z-10 px-8 py-3 font-medium text-background bg-foreground rounded-full hover:scale-110 transition-transform duration-300">
          Liquid Button
        </button>
        <motion.div 
          animate={{ x: [0, -20, 20, 0], y: [0, 20, -20, 0] }}
          transition={{ repeat: Infinity, duration: 3, ease: "linear" }}
          className="absolute z-0 w-12 h-12 bg-foreground rounded-full -left-2"
        />
        <motion.div 
          animate={{ x: [0, 20, -20, 0], y: [0, -20, 20, 0] }}
          transition={{ repeat: Infinity, duration: 4, ease: "linear" }}
          className="absolute z-0 w-10 h-10 bg-foreground rounded-full -right-2"
        />
      </div>
    </div>
  );
}