import { Box, Typography, useTheme } from "@mui/material";
import React from "react";
import { MotionBox } from "./MotionComponents";
import { MusicNote } from "@mui/icons-material";

type PlaylistCardProps = {
    name: string;
    onClick?: () => void;
};
export default function PlaylistCard({ name, onClick }: PlaylistCardProps) {
    const theme = useTheme();
    return (
        <Box
            display='flex'
            flexDirection='column'
            justifyContent='center'
            onClick={onClick}
        >
            <MotionBox
                width={120}
                height={120}
                display='flex'
                justifyContent='center'
                alignContent='center'
                alignItems='center'
                bgcolor='primary.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, rotate: '90deg' }}
            >
                <MusicNote sx={{ scale: 2 }} />
            </MotionBox>
            <Typography textAlign='center'>
                New playlist
            </Typography>
        </Box>
    );
}