"use client";

import { motion, useReducedMotion } from "motion/react";
import { cn } from "@/lib/utils";

interface AgentSphereProps {
  className?: string;
}

export function AgentSphere({ className }: AgentSphereProps) {
  const reduceMotion = useReducedMotion();

  return (
    <motion.div
      className={cn(
        "relative flex size-16 items-center justify-center sm:size-20",
        className
      )}
      aria-hidden
      initial={{ opacity: 0, scale: 0.8 }}
      animate={{
        opacity: 1,
        scale: 1,
        y: reduceMotion ? 0 : [0, -5, 0],
      }}
      transition={{
        opacity: { duration: 0.5, ease: [0.22, 1, 0.36, 1] },
        scale: { type: "spring", stiffness: 320, damping: 24 },
        y: reduceMotion
          ? undefined
          : { duration: 4, repeat: Infinity, ease: "easeInOut" },
      }}
    >
      <motion.div
        className="absolute inset-0 rounded-full bg-primary/15 blur-xl"
        animate={
          reduceMotion
            ? undefined
            : { scale: [1, 1.12, 1], opacity: [0.6, 0.9, 0.6] }
        }
        transition={{ duration: 3.5, repeat: Infinity, ease: "easeInOut" }}
      />
      <div
        className="relative size-full rounded-full shadow-lg"
        style={{
          background:
            "radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--brand-primary) 55%, white), var(--brand-primary) 45%, var(--brand-primary-dark) 100%)",
        }}
      >
        <div className="absolute inset-[18%] rounded-full bg-white/20 blur-sm" />
        <div className="absolute left-[22%] top-[18%] size-[28%] rounded-full bg-white/35 blur-[2px]" />
      </div>
    </motion.div>
  );
}