import type { SVGProps } from "react";
import { buildSpiral } from "@/lib/spiral";

/**
 * Spirale de Fibonacci construite par programme : carrés de côtés
 * 1, 1, 2, 3, 5, 8, 13, 21 (…) disposés en rectangle, et quart de cercle
 * inscrit dans chaque carré. L'approximation du nombre d'or est celle de la
 * suite de Fibonacci (21/13 ≈ 1,615) — ce n'est pas une spirale
 * logarithmique exacte.
 */

type Props = SVGProps<SVGSVGElement> & {
  levels?: number;
  showSquares?: boolean;
  strokeWidth?: number;
  /** miroir horizontal / vertical pour orienter le motif */
  flipX?: boolean;
  flipY?: boolean;
  title?: string;
};

export function GoldenSpiral({
  levels = 8,
  showSquares = true,
  strokeWidth = 0.12,
  flipX = false,
  flipY = false,
  title,
  ...rest
}: Props) {
  const { squares, path, bbox } = buildSpiral(levels);
  const pad = strokeWidth;
  const transform = `translate(${flipX ? bbox.x * 2 + bbox.w : 0} ${
    flipY ? bbox.y * 2 + bbox.h : 0
  }) scale(${flipX ? -1 : 1} ${flipY ? -1 : 1})`;
  return (
    <svg
      viewBox={`${bbox.x - pad} ${bbox.y - pad} ${bbox.w + pad * 2} ${bbox.h + pad * 2}`}
      fill="none"
      stroke="currentColor"
      strokeWidth={strokeWidth}
      strokeLinecap="round"
      aria-hidden={title ? undefined : true}
      role={title ? "img" : undefined}
      {...rest}
    >
      {title ? <title>{title}</title> : null}
      <g transform={transform}>
        {showSquares
          ? squares.map((sq, i) => (
              <rect
                key={i}
                x={sq.x}
                y={sq.y}
                width={sq.s}
                height={sq.s}
                strokeWidth={strokeWidth * 0.75}
                opacity={0.8}
              />
            ))
          : null}
        <path d={path} />
      </g>
    </svg>
  );
}