"use client";

import * as React from "react";

interface GradientMeshProps {
  className?: string;
  variant?: "subtle" | "metallic" | "warm";
  animate?: boolean;
}

export const GradientMesh: React.FC<GradientMeshProps> = ({
  className = "",
  variant = "subtle",
  animate = true,
}) => {
  const gradients = {
    subtle: {
      bg: "transparent",
      blob1: "rgba(226, 232, 240, 0.6)",
      blob2: "rgba(241, 245, 249, 0.7)",
      blob3: "rgba(203, 213, 225, 0.35)",
    },
    metallic: {
      bg: "transparent",
      blob1: "rgba(186, 206, 235, 0.4)",
      blob2: "rgba(214, 224, 240, 0.5)",
      blob3: "rgba(170, 190, 220, 0.25)",
    },
    warm: {
      bg: "transparent",
      blob1: "rgba(241, 245, 249, 0.6)",
      blob2: "rgba(248, 250, 252, 0.7)",
      blob3: "rgba(226, 232, 240, 0.4)",
    },
  };

  const colors = gradients[variant];

  return (
    <div
      className={`absolute inset-0 pointer-events-none overflow-hidden ${className}`}
      aria-hidden="true"
    >
      {/* Large Blob 1 */}
      <div
        className={`absolute rounded-full ${animate ? "animate-gradient-blob-1" : ""}`}
        style={{
          width: "900px",
          height: "900px",
          background: `radial-gradient(circle, ${colors.blob1} 0%, transparent 65%)`,
          top: "-20%",
          left: "-10%",
          filter: "blur(80px)",
        }}
      />
      {/* Large Blob 2 */}
      <div
        className={`absolute rounded-full ${animate ? "animate-gradient-blob-2" : ""}`}
        style={{
          width: "800px",
          height: "800px",
          background: `radial-gradient(circle, ${colors.blob2} 0%, transparent 65%)`,
          bottom: "-25%",
          right: "-10%",
          filter: "blur(70px)",
        }}
      />
      {/* Accent Blob 3 */}
      <div
        className={`absolute rounded-full ${animate ? "animate-gradient-blob-3" : ""}`}
        style={{
          width: "600px",
          height: "600px",
          background: `radial-gradient(circle, ${colors.blob3} 0%, transparent 65%)`,
          top: "30%",
          left: "25%",
          filter: "blur(60px)",
        }}
      />
    </div>
  );
};
