type DotsProps = {
  numberOfDots: number;
  dotColor?: string;
  styleClasses?: string;
};

function Dots({ numberOfDots, dotColor, styleClasses }: DotsProps) {
  const dotRadius = 5;
  const dotSpacing = 10;
  const svgWidth = numberOfDots * (2 * dotRadius + dotSpacing);
  const svgHeight = numberOfDots * (2 * dotRadius + dotSpacing);

  const dotsArray = [];

  for (let i = 0; i < numberOfDots; i++) {
    for (let j = 0; j < numberOfDots; j++) {
      dotsArray.push(
        <circle
          key={`${i}-${j}`}
          className={styleClasses}
          cx={i * (2 * dotRadius + dotSpacing) + dotRadius}
          cy={j * (2 * dotRadius + dotSpacing) + dotRadius}
          fill={dotColor}
          r={dotRadius}
          stroke="none"
          strokeWidth="1"
        />
      );
    }
  }

  return (
    <svg
      aria-hidden
      className="text-burnt-sienna dark:text-persian-green fill-current"
      height={svgHeight}
      width={svgWidth}
    >
      {dotsArray}
    </svg>
  );
}

export default Dots;