import { m } from "framer-motion";

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

const variants = {
  initial: { scale: 1 },
  animate: {
    scale: [1, 0.8, 1.1, 1],
    transition: { duration: 0.25, ease: "easeInOut" },
  },
  exit: { scale: 0 },
};

interface DotProps {
  width?: number;
  height?: number;
  x?: number;
  y?: number;
  angle?: number;
  scale?: number;
  opacity?: number;
  animate?: boolean;
}

export const Dot = ({ animate = true }: DotProps) => {
  return (
    <m.span
      className={styles.dot}
      initial="initial"
      animate={animate ? "animate" : "initial"}
      exit="exit"
      variants={variants}
      layout
    />
  );
};