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

export function DotBackground({ className }: { className?: string }) {
  return (
    <div className={cn(
      "fixed inset-0 -z-10",
      className
    )}>
      <div
        className={cn(
          "absolute inset-0",
          "[background-size:28px_28px]",
          "[background-image:radial-gradient(var(--dot-color)_1px,transparent_1px)]",
          "dark:[background-image:radial-gradient(#404040_1px,transparent_1px)]",
          "opacity-40 dark:opacity-20",
        )}
      />
      {/* Radial gradient for the container to give a faded look */}
      <div className="pointer-events-none absolute inset-0 [mask-image:radial-gradient(ellipse_at_center,transparent_30%,black)]"></div>
    </div>
  )
}
