import { Center, Alert, AlertIcon, AlertTitle, AlertDescription, Button } from '@chakra-ui/react'

const BrowseClass = ({ action }: { action: any }) => {
    return (
        <Center flexDirection={'column'}>
            <Alert
                bg={'transparent'}
                status="info"
                flexDirection="column"
                alignItems="center"
                justifyContent="center"
                textAlign="center"
                height="200px"
            >
                <AlertIcon boxSize="40px" mr={0} />
                <AlertTitle mt={4} mb={1} fontSize="lg">
                    Cart is Empty
                </AlertTitle>
                <AlertDescription maxWidth="sm">No Items Found</AlertDescription>
                <Button
                    mt={'20px'}
                    bg={'rgb(72, 15, 106)'}
                    color={'white'}
                    onClick={action}
                >
                    Browse Class
                </Button>
            </Alert>
        </Center>
    )
}

export default BrowseClass