"use client";

import { type CSSProperties, useRef } from "react";
import { useInView } from "@/app/hooks/useInView";

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

/** Linha fina que se desenha da esquerda para a direita quando chega à janela (CSS em globals.css, .ds-draw-line). */
export function DrawLine({
  className = "",
  delay = 0,
}: Readonly<DrawLineProps>) {
  const ref = useRef<HTMLSpanElement>(null);
  const shown = useInView(ref, { amount: 0.7 });

  return (
    <span
      ref={ref}
      className={`ds-draw-line ${className}`.trim()}
      data-shown={shown ? "" : undefined}
      style={{ "--reveal-delay": `${delay}s` } as CSSProperties}
    />
  );
}