import clsx from 'clsx';
import { motion, useAnimation } from 'framer-motion';

interface RefreshButtonProps {
  onClick: () => void;
  children?: React.ReactNode;
}
export const RefreshButton = ({ onClick, children }: RefreshButtonProps) => {
  const controls = useAnimation();
  const handleReset = async () => {
    controls.start({
      rotate: 360,
      transition: { duration: 0.4 },
    });
    controls.set({ rotate: 0 });
    onClick?.();
  };
  return (
    <button type="button" onClick={handleReset} className="flex flex-row">
      {children}
      <motion.div className={clsx('btn reset-btn')} animate={controls}>
        <span>reset</span>
      </motion.div>
    </button>
  );
};
