"use client";

import { motion } from "motion/react";
import { useState } from "react";
import { useReducedMotion } from "@/app/hooks/useReducedMotion";

interface DrawLineProps {
  className?: string;
  delay?: number;
}

export function DrawLine({
  className = "",
  delay = 0,
}: Readonly<DrawLineProps>) {
  const shouldReduceMotion = useReducedMotion();
  const [animating, setAnimating] = useState(!shouldReduceMotion);

  return (
    <motion.span
      className={`ds-draw-line ${className}`.trim()}
      initial={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, scaleX: 0 }}
      whileInView={
        shouldReduceMotion ? { opacity: 1 } : { opacity: 1, scaleX: 1 }
      }
      viewport={{ once: true, amount: 0.7 }}
      transition={{
        duration: shouldReduceMotion ? 0.25 : 0.6,
        delay,
        ease: [0.16, 1, 0.3, 1],
      }}
      style={{
        transformOrigin: "left",
        willChange:
          animating && !shouldReduceMotion ? "transform, opacity" : undefined,
      }}
      onAnimationComplete={() => setAnimating(false)}
    />
  );
}