"use client";

import { useState, useEffect } from "react";
import { loadTheme } from "@/lib/stores/theme";

export function BackgroundBlobs() {
  const [show, setShow] = useState(true);

  useEffect(() => {
    setShow(loadTheme().showBlobs);
    const handler = () => setShow(loadTheme().showBlobs);
    window.addEventListener("theme-change", handler);
    window.addEventListener("storage", handler);
    return () => {
      window.removeEventListener("theme-change", handler);
      window.removeEventListener("storage", handler);
    };
  }, []);

  if (!show) return null;

  return (
    <div className="fixed inset-0 pointer-events-none overflow-hidden z-0">
      <div className="absolute top-[-10%] left-[-5%] w-[50%] h-[50%] bg-blue-500/10 blur-[120px] rounded-full animate-pulse" />
      <div className="absolute bottom-[10%] right-[-5%] w-[40%] h-[40%] bg-primary/10 blur-[120px] rounded-full animate-pulse" style={{ animationDelay: "2s" }} />
      <div className="absolute top-[20%] right-[10%] w-[30%] h-[30%] bg-orange-600/5 blur-[100px] rounded-full animate-pulse" style={{ animationDelay: "1s" }} />
    </div>
  );
}
