'use client'

import { type ReactNode } from 'react'
import { useSidebarResize, SidebarResizeHandle } from '@/components/sidebar-resize'

export function SidebarResizeClient({ children }: { children: ReactNode }) {
  const { width, isDragging, onPointerDown } = useSidebarResize()

  return (
    <div className="flex h-screen overflow-hidden bg-memento-desk dark:bg-background">
      <div className="contents" style={{ ['--sidebar-width' as string]: `${width}px` }}>
        <div className="flex h-full" style={{ width: `${width}px` }}>
          {children}
        </div>
      </div>
      <SidebarResizeHandle onPointerDown={onPointerDown} isDragging={isDragging} />
    </div>
  )
}