"use client"

/**
 * SidebarShell — SidebarProvider with layout-aware widths.
 * Desktop expanded/collapsed is persisted in the `sidebar_state_v2` cookie by `@exxatdesignux/ui`
 * `SidebarProvider` (read on mount + write on toggle). `(app)/layout` passes
 * `defaultOpen` from the same cookie on the server so SSR matches the first client paint.
 */

import * as React from "react"
import { SidebarProvider } from "../ui/sidebar"

export function SidebarShell({
  children,
  // Compact is the only shell in dogfood — pin provider `--header-height` to
  // the utility-bar token so sticky CSS + bar height stay one rem source.
  headerHeight = "var(--shell-utility-bar-height)",
  defaultOpen = true,
  wrapperClassName,
  ...wrapperProps
}: React.ComponentProps<"div"> & {
  children: React.ReactNode
  headerHeight?: string
  defaultOpen?: boolean
  /** Extra classes on the SidebarProvider wrapper div */
  wrapperClassName?: string
}) {
  return (
    <SidebarProvider
      defaultOpen={defaultOpen}
      className={wrapperClassName}
      style={
        {
          "--sidebar-width": "16rem",
          "--sidebar-width-icon": "3rem",
          "--header-height": headerHeight,
        } as React.CSSProperties
      }
      {...wrapperProps}
    >
      {children}
    </SidebarProvider>
  )
}