import Link from "next/link";
import { HomeTabs } from "./HomeTabs";
import { NewTrailButton } from "./NewTrailButton";
import { UserMenu } from "./UserMenu";
import "./HomeShell.css";

export function HomeShell({ children }: { children: React.ReactNode }) {
  return (
    <div className="HomeShell">
      <div className="HomeShell-header">
        <div className="HomeShell-titleRow">
          <h1 className="HomeShell-title">
            <Link href="/">sidetrail</Link>
          </h1>
          <div className="HomeShell-actions">
            <NewTrailButton />
            <UserMenu />
          </div>
        </div>
        <p className="HomeShell-subtitle">trails worth walking</p>
      </div>
      <div className="HomeShell-content">
        <HomeTabs />
        {children}
      </div>
    </div>
  );
}
