"use client";

import Container from "@/components/shared/container";
import { Skeleton } from "@/components/ui/skeleton/skeleton";
import ProfileAside from "@/components/widget/profile/profile-aside/profile-aside";
import { useAuth } from "@/features/auth/hooks/use-auth";
import { Main } from "@/templates/Main";

export default function HotelListPage({
  children,
}: {
  children: React.ReactNode;
}) {
  const { isAuthenticated } = useAuth();
  const buttons = [
    { label: "Kişisel Bilgilerim", url: "personal-information" },
  ];

  return (
    <Main>
      <Container>
        {!isAuthenticated && <Skeleton className="h-[500px]" />}
        {isAuthenticated && (
          <>
            <h1 className="mb-8 pt-6 text-3xl font-bold text-gray-800">
              Profilim
            </h1>
            <div className="flex flex-col gap-4 lg:flex-row">
              <div className="w-full lg:w-1/4 ">
                <ProfileAside buttons={buttons} />
              </div>
              <div className="mb-[100px] w-full lg:w-3/4">{children}</div>
            </div>
          </>
        )}
      </Container>
    </Main>
  );
}