import Navbar from "../../components/Navbar";
import Footer from "../HomePage/Footer";
import PrimeirosPassosList from "./PrimeirosPassosList";
import { useIsMobile } from "../../hooks/useIsMobile";
import DesktopOnlyTapume from "../../components/DesktopOnlyTapume";

export default function PrimeirosPassos() {
  const isSmallScreen = useIsMobile(1024);

  return (
    <div className="w-full min-h-screen bg-white flex flex-col">
      <Navbar />
      {isSmallScreen ? (
        <div className="mt-24 lg:mt-[195px] flex-1 min-h-[420px]">
          <DesktopOnlyTapume
            title="Primeiros Passos foi pensado para desktop"
            message="Estas atividades usam uma interface mais ampla para facilitar a leitura e a prática. Recomendamos acessar pelo computador."
          />
        </div>
      ) : (
        <div className="mt-32 lg:mt-[195px]">
          <PrimeirosPassosList />
        </div>
      )}
      <Footer />
    </div>
  );
}
