import { Add } from "@mui/icons-material";
import { Box, BoxProps, Theme, Typography, useTheme } from "@mui/material";
import React from "react";
import { MotionBox } from "./MotionComponents";
import { Variants } from "framer-motion";

export default function AddPlaylistButton(props: BoxProps) {
    const theme = useTheme();
    return (
        <Box
            display='flex'
            flexDirection='column'
            justifyContent='center'
            {...props}
        >
            <MotionBox
                width={120}
                height={120}
                display='flex'
                justifyContent='center'
                alignContent='center'
                alignItems='center'
                bgcolor='success.main'
                color='success.contrastText'
                borderRadius={theme.shape.borderRadius}
                whileHover={{ borderRadius: '30%', scale: 0.8 }}
                whileTap={{borderRadius: '40%', scale: 0.7, backgroundColor: theme.palette.info.main}}
            >
                <Add sx={{scale:2}} />
            </MotionBox>
            <Typography textAlign='center'>
                New playlist
            </Typography>
        </Box>
    );
}