Divider Animated Line

"use client";

import { motion, useInView } from "framer-motion";
import { useRef } from "react";

interface DividerAnimatedLineProps {
  thickness?: number;
  width?: string;
}

export default function DividerAnimatedLine({
  thickness = 2,
  width = "60%",
}: DividerAnimatedLineProps) {
  const ref = useRef<HTMLDivElement>(null);
  const inView = useInView(ref, { once: true, margin: "-50px" });

  return (
    <div
      ref={ref}
      style={{
        display: "flex",
        justifyContent: "center",
        padding: "2rem 0",
        background: "var(--color-background)",
      }}
    >
      <svg
        viewBox="0 0 1000 10"
        preserveAspectRatio="none"
        style={{
          width,
          height: thickness + 4,
          overflow: "visible",
        }}
      >
        <motion.line
          x1="0"
          y1="5"
          x2="1000"
          y2="5"
          stroke="var(--color-border)"
          strokeWidth={thickness}
          strokeLinecap="round"
          initial={{ pathLength: 0, opacity: 0 }}
          animate={inView ? { pathLength: 1, opacity: 1 } : { pathLength: 0, opacity: 0 }}
          transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1] }}
        />
        {/* Accent dot at center */}
        <motion.circle
          cx="500"
          cy="5"
          r={thickness + 1}
          fill="var(--color-accent)"
          initial={{ scale: 0 }}
          animate={inView ? { scale: 1 } : { scale: 0 }}
          transition={{ duration: 0.4, delay: 0.8, ease: [0.16, 1, 0.3, 1] }}
        />
      </svg>
    </div>
  );
}