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

import { lightSpring } from "@/helpers/animation";

import styles from "./styles.module.scss";

interface DividerProps {
  animate?: boolean;
  triggerOnce?: boolean;
  delay?: number;
  className?: string;
}

export default function Divider({
  animate = true,
  triggerOnce = false,
  delay = 0,
  className,
}: DividerProps) {
  const ref = useRef<HTMLHRElement>(null);
  const inView = useInView(ref, {
    once: triggerOnce,
    amount: 0.1,
  });

  const variants = {
    initial: { scaleX: 0, originX: 0 },
    animate: {
      scaleX: 1,
      originX: 0,
      transition: { ...lightSpring, delay },
    },
  };

  return (
    <m.hr
      ref={ref}
      className={clsx(styles.divider, className)}
      initial="initial"
      animate={animate ?? inView ? "animate" : "initial"}
      variants={variants}
    />
  );
}