import { useState, type ReactNode } from 'react';
import { WorkspaceBarTargetProvider } from '../workspaces/barSlot';

type AppBottomBarProps = {
  /** App tree that may render `<WorkspaceBarSlot>` to portal content into the bar. */
  children: ReactNode;
};

/**
 * Shell-owned status bar pinned to the bottom of the window. Renders an empty
 * strip by default; workspaces (or other shell features) contribute controls by
 * mounting `<WorkspaceBarSlot>` inside this provider's subtree.
 */
export function AppBottomBar({ children }: AppBottomBarProps) {
  const [target, setTarget] = useState<HTMLDivElement | null>(null);

  return (
    <WorkspaceBarTargetProvider value={target}>
      {children}
      <div className="border-border bg-background/95 fixed right-0 bottom-0 left-0 z-30 flex h-12 items-center border-t">
        <div
          ref={setTarget}
          className="flex min-w-0 flex-1 items-center gap-2 px-2"
        />
      </div>
    </WorkspaceBarTargetProvider>
  );
}