export function DotPattern() {
  return (
    <div className="relative flex w-full h-80 items-center justify-center bg-[#050505] rounded-2xl border border-border overflow-hidden">
      {/* Background SVG Pattern */}
      <svg className="absolute inset-0 h-full w-full stroke-white/10 [mask-image:radial-gradient(100%_100%_at_top_center,white,transparent)]" aria-hidden="true">
        <defs>
          <pattern id="dot-pattern" width="16" height="16" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" x="0" y="0">
            <circle id="pattern-circle" cx="1" cy="1" r="1" fill="currentColor"></circle>
          </pattern>
        </defs>
        <rect width="100%" height="100%" strokeWidth="0" fill="url(#dot-pattern)"></rect>
      </svg>

      <div className="relative z-10 flex flex-col items-center">
        <h3 className="text-3xl font-medium tracking-tight text-foreground">Dotted Space</h3>
        <p className="text-muted-foreground mt-2 max-w-xs text-center text-sm">
          A minimalist SVG dot pattern with a radial mask fade-out.
        </p>
      </div>
    </div>
  );
}