"use client"

import type { ReactNode } from "react"
import { ContactsAppShell } from "@/components/gmail/contacts-page/contacts-app-shell"
import { DemoChrome } from "@/components/demo/demo-chrome"
import { SuiteThemeShell } from "@/components/suite/suite-theme-shell"
import { DemoContactsProvider } from "@/lib/demo/demo-contacts-context"
import { DemoContactsBootstrap } from "@/lib/demo/demo-contacts-bootstrap"
import { useDemoContactsStore } from "@/lib/demo/demo-contacts-store"

export function DemoContactsShell({ children }: { children: ReactNode }) {
  return (
    <DemoContactsProvider onReset={() => useDemoContactsStore.getState().reset()}>
      <DemoContactsBootstrap />
      <SuiteThemeShell>
        <DemoChrome>
          <ContactsAppShell />
          {children}
        </DemoChrome>
      </SuiteThemeShell>
    </DemoContactsProvider>
  )
}