import React from "react";
import { useNavigate } from "react-router-dom";
import './styles/Pricing.css'
import Button from '@mui/material/Button';

export default function StripeSuccess() {

    let navigate = useNavigate();

    return (
        <div className=" container w-100 full-vh">
            <div className="px-4 py-5 my-5 text-center nav-bg rounded-pill shadow-custom">
                <h1 className="display-5 fw-bold">You're now Subscribed!</h1>
                <div className="col-lg-6 mx-auto">
                    <p className="lead mb-4">
                        You're ready to ride! Roll on over to our
                        <Button
                            className='w-75'
                            onClick={
                                () => {
                                    navigate("/map")
                                }
                            }
                            variant="contained"
                            sx={{ mt: 3, mb: 2, bgcolor: "#EEB2A5" }}
                        >
                            Map
                        </Button>
                    </p>
                    <p className="lead"> and check out a bike now!</p>
                </div>
            </div>
        </div>
    )
}