import React from "react";
import { Button, Flex } from "@chakra-ui/core";
import { motion } from "framer-motion";

const AnimatedFlex = motion.custom(Flex);

const FooterButton = React.forwardRef(
  ({ onClick, side, children, ...props }, ref) => {
    return (
      <AnimatedFlex
        p={0}
        w="auto"
        ref={ref}
        flexGrow={0}
        float={side}
        flexShrink={0}
        maxWidth="100%"
        flexBasis="auto"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 0.6 }}
      >
        <Button size="xs" variant="ghost" onClick={onClick} {...props}>
          {children}
        </Button>
      </AnimatedFlex>
    );
  }
);

FooterButton.displayName = "FooterButton";
export default FooterButton;