import React from 'react';

/**
 * DrillTeeth
 *
 * Abstract, minimalist section divider inspired by HDD bore paths.
 * Not literal teeth — instead, a subtle organic wave that hints at
 * earth strata displaced by subsurface drilling.
 *
 * Two gentle asymmetric curves create a refined, modern transition
 * between sections. Think Stripe/Linear, not construction site.
 *
 * Usage: Place inside a section with `relative overflow-hidden`.
 * The SVG renders outside the box via translate, creating overlap.
 */

interface DrillTeethProps {
  /** Which edge of the parent section */
  position?: 'top' | 'bottom';
  /** Fill color — should match the CURRENT section's background */
  fill?: string;
  className?: string;
}

export function DrillTeeth({
  position = 'bottom',
  fill = 'currentColor',
  className = '',
}: DrillTeethProps) {
  const isTop = position === 'top';

  return (
    <div
      className={`absolute left-0 right-0 w-full pointer-events-none z-20 ${
        isTop ? 'top-0 -translate-y-[99%]' : 'bottom-0 translate-y-[99%]'
      } ${className}`}
      aria-hidden="true"
      style={{ lineHeight: 0 }}
    >
      <svg
        viewBox="0 0 1440 48"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        preserveAspectRatio="none"
        className="w-full h-[clamp(16px,3vw,48px)] block"
        style={isTop ? { transform: 'scaleY(-1)' } : undefined}
      >
        {/* Primary curve — gentle asymmetric wave */}
        <path
          d="M0,48 L0,28 C120,36 240,6 480,12 C720,18 840,42 1080,24 C1200,16 1320,32 1440,28 L1440,48 Z"
          fill={fill}
        />
        {/* Secondary subtle offset — adds depth like a geological layer */}
        <path
          d="M0,48 L0,36 C180,42 360,16 600,22 C840,28 960,44 1200,32 C1320,26 1400,38 1440,36 L1440,48 Z"
          fill={fill}
          opacity="0.6"
        />
      </svg>
    </div>
  );
}