"use client";
import AnimatedContainer from "@components/AnimatedConainer/AnimatedContainer";
import ExploreCategories from "@core/app/components/ExploreCategories/ExploreCategories";
import HeaderConfProvider from "@core/app/components/HeaderConfProvider/HeaderConfProvider";
import useContainerHeight from "@core/app/hooks/ContainerHeight";
import { ScrollToTop } from "@core/app/components/ScrollTop";
import DefaultLoginAction from "@core/app/components/LoginAction/DefaultLoginAction";

export default function GetAppointmentsPage() {
    const containerHeight = useContainerHeight();

    return (
        <AnimatedContainer
            color="#aeaeae"
            minSize={150}
            maxSize={500}
            items={10}
            style={{
                display: "flex",
                flexDirection: "column",
                justifyContent: "center",
                alignItems: "center",
            }}
        >
            <ScrollToTop />
            <HeaderConfProvider />
            <DefaultLoginAction />
            <div className="homeCentered">
                <h1 className="homeTitleHeader">Quiero reservar turno</h1>
                <p className="homeResumeHeader">
                    Reservar un turno es muy fácil. Solo tenés que explorar nuestras categorías y
                    buscar el servicio más adecuado para vos. Una vez que ingreses al servicio,
                    podrás realizar la reserva. Tené en cuenta que, para poder reservar, debés estar
                    registrado en nuestro sitio web.
                </p>
            </div>
            <div className="homeCentered">
                <ExploreCategories containerHeight={containerHeight} />

                <div style={{ height: "100px" }}>&nbsp;</div>
            </div>
        </AnimatedContainer>
    );
}
