/**
 * FluksioLoader: the app's shared loading mark.
 *
 * The brand mark — four neurons in a ring — drawn as one continuous stroke
 * that traces itself and wipes away in a loop (see the `.fluksio-loader-line`
 * rule + `fluksio-draw` keyframes in index.css, which also guard
 * `prefers-reduced-motion`: `MotionConfig` covers JS animations, not CSS ones).
 * Renders a bare <svg> so it drops in for a lucide icon: size it with a
 * Tailwind `size-*` class and color it via a `text-*` class (everything is
 * currentColor).
 */

/**
 * The ring, clockwise from the top node: a 45° connector, then 270° around the
 * node it lands on, four times over. Geometry from `assets/fluksio-light.svg`
 * — same node centres and radius, with the connectors pulled onto the circles
 * so the whole mark is a single subpath and the dash traces it in one lap.
 *
 * Stroke weight is the mark's own 1.5 rather than the weight 2 of the glyphs in
 * `components/icons/`: at 2 the node rings close up into dots.
 */
const RING =
  "M 13.71 5.84 L 18.16 10.29 A 2.424 2.424 0 1 1 18.16 13.71 L 13.71 18.16 A 2.424 2.424 0 1 1 10.29 18.16 L 5.84 13.71 A 2.424 2.424 0 1 1 5.84 10.29 L 10.29 5.84 A 2.424 2.424 0 1 1 13.71 5.84 Z"

export function FluksioLoader({
  className,
  ...props
}: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={1.5}
      strokeLinecap="round"
      className={className}
      role="status"
      aria-label="Loading"
      {...props}
    >
      <path className="fluksio-loader-line" pathLength={1} d={RING} />
    </svg>
  )
}