"use client";

import { useLayoutEffect } from 'react';
import { useRouter } from 'next/navigation';
import { TopBar } from "@/components/layout/top-bar";
import { HomePage2 } from "@/components/pages/home-page2";
import { isAuthenticated } from '@/lib/auth';
import { useDeviceType } from '@/hooks/useDeviceType';
import H5TopBar from '@/components/layout/H5TopBar';

export default function Home() {
  const router = useRouter();
  const { deviceType, isMobile, isTablet, isDesktop } = useDeviceType();

  const authed = isAuthenticated();

  useLayoutEffect(() => {
    if (authed) {
      router.replace('/home');
    }
  }, [authed, router]);
  
  if (authed) {
    return null;
  }
  return (
    <>
      {isMobile || isTablet ? (
        <H5TopBar />
      ) : (
        <TopBar collapsed={true} />
      )}
      <HomePage2 />
    </>
  );
}