import { useInView } from 'framer-motion';
import { useRef } from 'react';
import { motion } from 'framer-motion';

export function AppearanceHr({
  className = '',
  delay = 0.2,
}: {
  className?: string;
  delay?: number;
}) {
  const ref = useRef<HTMLHRElement>(null);
  const isInView = useInView(ref);

  return (
    <motion.hr
      ref={ref}
      initial={{ scaleX: 0 }}
      animate={{ scaleX: isInView ? 1 : 0 }}
      transition={{
        duration: 1,
        delay,
        type: 'just',
      }}
      exit={{ scaleX: 0, type: 'just' }}
      className={className + ' border-[#3D425C] h-0.5 origin-left'}
    />
  );
}
