"use client";

import { usePathname } from "next/navigation";
import { SiteHeaderFrame } from "@/components/site-header-frame";
import { SiteBreadcrumbs } from "@/components/site-breadcrumbs";
import { HomeHeroSparkles } from "@/components/home-hero-sparkles";

export function ReadingShell({
  children,
  isLoggedIn,
}: {
  children: React.ReactNode;
  isLoggedIn: boolean;
}) {
  const pathname = usePathname();
  const isSelectPage = pathname.startsWith("/reading/select");
  const isReadingIndex = pathname === "/reading";

  if (isSelectPage) {
    return <>{children}</>;
  }

  if (isReadingIndex) {
    return (
      <div className="relative flex min-h-screen flex-col bg-[url('/readingback.png')] bg-cover bg-top bg-no-repeat">
        <HomeHeroSparkles />
        <SiteHeaderFrame isLoggedIn={isLoggedIn} overlay />
        <div className="relative z-10 flex min-h-screen flex-1 flex-col pt-24 md:pt-28">
          {children}
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen flex flex-col">
      <SiteHeaderFrame isLoggedIn={isLoggedIn} />
      <SiteBreadcrumbs />
      <div className="flex-1">{children}</div>
    </div>
  );
}