"use client";

// Adapted from Kokonut UI (@dorianbaffier), MIT. See THIRD_PARTY_NOTICES.md.
import { type ComponentProps } from "react";
export interface BackgroundPathsProps extends ComponentProps<"div"> {
  animate?: boolean;
}
export function BackgroundPaths({
  animate = true,
  children,
  className = "",
  ...props
}: BackgroundPathsProps) {
  return (
    <div
      {...props}
      className={`ynr-background-paths ${className}`}
      data-animate={animate}
    >
      <svg
        aria-hidden="true"
        viewBox="0 0 800 300"
        preserveAspectRatio="xMidYMid slice"
        fill="none"
      >
        {Array.from({ length: 12 }, (_, i) => (
          <path
            key={i}
            d={`M -100 ${80 + i * 18} C 160 ${-160 + i * 22}, 430 ${450 - i * 12}, 900 ${40 + i * 16}`}
          />
        ))}
      </svg>
      <div className="ynr-background-paths-content">{children}</div>
    </div>
  );
}