"use client";

import { motion, useReducedMotion } from "motion/react";

/**
 * Section divider drawn as a plain weave: warp threads crossed by a weft that
 * stitches itself across the page as the divider comes into view.
 */
export function WeaveRule({ className }: { className?: string }) {
  const reduced = useReducedMotion();
  const warps = Array.from({ length: 48 }, (_, i) => i);

  return (
    <div
      className={className}
      aria-hidden="true"
      style={{ width: "100%", height: 24, overflow: "hidden" }}
    >
      <svg
        viewBox="0 0 480 24"
        preserveAspectRatio="none"
        className="h-full w-full"
      >
        <g stroke="var(--cotton)" strokeOpacity="0.14" strokeWidth="0.6">
          {warps.map((i) => (
            <line key={i} x1={i * 10 + 5} y1="4" x2={i * 10 + 5} y2="20" />
          ))}
        </g>

        <motion.path
          d="M0 12 Q 5 6, 10 12 T 20 12 T 30 12 T 40 12 T 50 12 T 60 12 T 70 12 T 80 12 T 90 12 T 100 12 T 110 12 T 120 12 T 130 12 T 140 12 T 150 12 T 160 12 T 170 12 T 180 12 T 190 12 T 200 12 T 210 12 T 220 12 T 230 12 T 240 12 T 250 12 T 260 12 T 270 12 T 280 12 T 290 12 T 300 12 T 310 12 T 320 12 T 330 12 T 340 12 T 350 12 T 360 12 T 370 12 T 380 12 T 390 12 T 400 12 T 410 12 T 420 12 T 430 12 T 440 12 T 450 12 T 460 12 T 470 12 T 480 12"
          fill="none"
          stroke="var(--thread)"
          strokeWidth="1"
          strokeLinecap="round"
          initial={{ pathLength: 0 }}
          whileInView={{ pathLength: 1 }}
          viewport={{ once: true, amount: 0.8 }}
          transition={{ duration: reduced ? 0 : 2.2, ease: [0.16, 1, 0.3, 1] }}
        />
      </svg>
    </div>
  );
}