"use client";
// Adapted from Magic UI (MIT). See THIRD_PARTY_NOTICES.md.
import { useId, type ComponentProps } from "react";
export interface DotPatternProps extends Omit<
  ComponentProps<"svg">,
  "width" | "height"
> {
  width?: number;
  height?: number;
  radius?: number;
}
export function DotPattern({
  width = 24,
  height = 24,
  radius = 1,
  className = "",
  ...props
}: DotPatternProps) {
  const id = useId();
  return (
    <svg
      {...props}
      aria-hidden="true"
      className={`ynr-dot-pattern ${className}`}
      width="100%"
      height="100%"
    >
      <defs>
        <pattern
          id={id}
          width={Math.max(1, width)}
          height={Math.max(1, height)}
          patternUnits="userSpaceOnUse"
        >
          <circle
            cx={width / 2}
            cy={height / 2}
            r={radius}
            fill="currentColor"
          />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill={`url(#${id})`} />
    </svg>
  );
}