import AnimatedContainer from "@components/AnimatedConainer/AnimatedContainer";
import CategoriesExplorer from "@core/app/components/Home/CategoriesExplorer/page";
import DefaultLoginAction from "@core/app/components/LoginAction/DefaultLoginAction";
import { ScrollToTop } from "@core/app/components/ScrollTop";

export default function CategoriesPage() {
    return (
        <AnimatedContainer
            color="#aeaeae"
            minSize={150}
            maxSize={500}
            items={10}
            style={{
                display: "flex",
                flexDirection: "column",
                justifyContent: "center",
                alignItems: "center",
            }}
        >
            <ScrollToTop />
            <DefaultLoginAction />
            <div className="homeCentered">
                <h1 className="homeTitleHeader">Explorar Categorías</h1>
                <p className="homeResumeHeader">
                    Explorá las categorías de servicios disponibles y encontrá fácilmente lo que
                    necesitás. Cada categoría agrupa servicios para que puedas sacar turnos de forma
                    rápida y organizada. Además, una vez que ingreses en una categoría, podrás
                    filtrar por tu ubicación para afinar la busqueda.
                </p>
            </div>
            <div className="homeCentered">
                <CategoriesExplorer />
                <div style={{ height: "100px" }}>&nbsp;</div>
            </div>
        </AnimatedContainer>
    );
}
