import { Layout, LayoutContent, LayoutHeader } from "@/components";
import { useGetProfile } from "@/lib/hooks";
import { Skeleton } from "@/ui";
import { t } from "i18next";

export const DashboardPage = () => {
  const { data: userIdentity, status } = useGetProfile();

  return (
    <Layout>
      <LayoutHeader />
      <LayoutContent>
        {status === "success" ? (
          <div className='flex items-center'>
            <h1 className='text-lg font-semibold md:text-2xl'>{`${t("dashboard.welcome")}, ${
              userIdentity?.name
            }`}</h1>
          </div>
        ) : (
          <Skeleton className='w-[100px] h-[20px] rounded-full' />
        )}
      </LayoutContent>
    </Layout>
  );
};
