import { motion } from 'framer-motion';
import styles from './DashedLine.module.scss';

type Props = {
  animate?: string;
};

const variants = {
  active: {
    strokeDasharray: '8 0',
    strokeDashoffset: 6,
    transition: {
      duration: 0.2,
    },
  },
  inactive: {
    strokeDasharray: '4 4',
    strokeDashoffset: 4,
    transition: {
      duration: 0.2,
    },
  },
};

const DashedLine = (props: Props) => {
  const { animate = 'inactive' } = props;
  return (
    <motion.svg
      viewBox="0 0 768 1"
      className={styles.line}
      variants={variants}
      animate={animate}
    >
      <g stroke="#000">
        {[...Array.from({ length: 128 }, (v, i) => i)].map((i) => {
          return (
            <line
              key={i}
              className={styles.dash}
              x1={(i + i) * 4}
              y1="1"
              x2={i * 8 + 8}
              y2="1"
            />
          );
        })}
      </g>
    </motion.svg>
  );
};

export default DashedLine;