"use client";

import React from "react";

interface SectionDividerProps {
  label?: string;
  className?: string;
}

export function SectionDivider({ label, className = "" }: SectionDividerProps) {
  return (
    <div className={`relative w-full h-[1px] select-none pointer-events-none z-20 ${className}`}>
      {/* 1. Full-width dashed line extending edge-to-edge with clear visibility */}
      <div className="absolute inset-x-0 top-0 border-t border-dashed border-[#94A3B8]/70" />

      {/* 2. Solid line inside 1440px container on the EXACT SAME line, with pixel-perfect crosshairs */}
      <div className="absolute inset-x-0 top-0 flex justify-center">
        <div className="w-full max-w-[1440px] border-t border-solid border-[#CBD5E1] relative">
          {/* Left Intersection Crosshair - exact center at x=0, y=0 */}
          <div className="absolute left-0 top-0 -translate-x-1/2 -translate-y-1/2 w-4 h-4 flex items-center justify-center">
            <svg width="9" height="9" viewBox="0 0 9 9" fill="none">
              <line x1="4.5" y1="0" x2="4.5" y2="9" stroke="#64748B" strokeWidth="1.2" />
              <line x1="0" y1="4.5" x2="9" y2="4.5" stroke="#64748B" strokeWidth="1.2" />
            </svg>
          </div>


          {/* Center Tag Badge if label provided */}
          {label && (
            <div className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2">
              <span className="bg-[#F8FAFC] px-4 py-0.5 font-mono text-[10px] sm:text-[11px] uppercase tracking-caps text-[#64748B] border border-[#E2E8F0] shadow-sm font-semibold inline-block">
                {label}
              </span>
            </div>
          )}

          {/* Right Intersection Crosshair - exact center at x=100%, y=0 */}
          <div className="absolute right-0 top-0 translate-x-1/2 -translate-y-1/2 w-4 h-4 flex items-center justify-center">
            <svg width="9" height="9" viewBox="0 0 9 9" fill="none">
              <line x1="4.5" y1="0" x2="4.5" y2="9" stroke="#64748B" strokeWidth="1.2" />
              <line x1="0" y1="4.5" x2="9" y2="4.5" stroke="#64748B" strokeWidth="1.2" />
            </svg>
          </div>
        </div>
      </div>
    </div>
  );
}






