import { Box, Typography, useTheme } from "@mui/material";
import React from "react";
import LoadingCard from "../components/LoadingCard";
import Scroll from "../components/Scroll";
import Page, { PageRoot } from "../components/Page";
import AppHeader from "../components/AppHeader";
import AddPlaylistButton from "../components/AddPlaylistButton";

export default function Landing() {
    const theme = useTheme();

    const handleCreatePlaylist = (name: string) => {
        console.log(`Creating playlist ${name}`);
    };

    return (
        <Page>
            <AppHeader />
            <PageRoot>
                
                <Typography variant='button'>Playlists</Typography>
                <Scroll display='flex' gap={theme.spacing(2)}>
                    <AddPlaylistButton onCreate={handleCreatePlaylist} />
                </Scroll>
            </PageRoot>
        </Page>
    );
}