"use client"

import { cn } from "@/lib/utils"

export function Crossblur({ active }: { active: boolean }) {
  return (
    <span
      className={cn(
        "pointer-events-none absolute inset-0 overflow-hidden rounded-xl transition-opacity duration-200 ease-out",
        active ? "opacity-100" : "opacity-0"
      )}
    >
      <span
        className={cn(
          "absolute inset-[-40%] rounded-full bg-[radial-gradient(circle_at_center,_rgba(59,130,246,0.25),_transparent_70%)] blur-lg transition-transform duration-500 ease-in-out",
          active ? "scale-[1.05] rotate-6" : "scale-100 -rotate-12"
        )}
      />
    </span>
  )
}
