"use client";
// Adapted from Magic UI (MIT). See THIRD_PARTY_NOTICES.md.
import { useId, type ComponentProps } from "react";
export interface GridPatternProps extends Omit<
  ComponentProps<"svg">,
  "width" | "height"
> {
  width?: number;
  height?: number;
  squares?: readonly (readonly [number, number])[];
  strokeDasharray?: string;
}
export function GridPattern({
  width = 24,
  height = 24,
  squares = [],
  strokeDasharray = "0",
  className = "",
  ...props
}: GridPatternProps) {
  const id = useId();
  return (
    <svg
      {...props}
      aria-hidden="true"
      className={`ynr-grid-pattern ${className}`}
      width="100%"
      height="100%"
    >
      <defs>
        <pattern
          id={id}
          width={Math.max(1, width)}
          height={Math.max(1, height)}
          patternUnits="userSpaceOnUse"
        >
          <path
            d={`M.5 ${height}V.5H${width}`}
            fill="none"
            stroke="currentColor"
            strokeDasharray={strokeDasharray}
          />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill={`url(#${id})`} />
      {squares.map(([x, y], i) => (
        <rect
          key={i}
          x={x * width}
          y={y * height}
          width={width}
          height={height}
          fill="currentColor"
          opacity=".25"
        />
      ))}
    </svg>
  );
}