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

const AnimatedFlex = motion.custom(Flex);

export default 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>
    );
});