"use client"
import React, { useContext } from "react"
import { classNames } from "../../utils"
import { SidebarContext } from "./SidebarContext"

export const SidebarOpen = ({
  children,
  className,
}: {
  children: React.ReactNode
  className?: string
}) => {
  const { disableExpand } = useContext(SidebarContext)

  return (
    <div
      className={classNames(
        "hidden overflow-hidden",
        { "group-hover:block": !disableExpand },
        className,
      )}
    >
      {children}
    </div>
  )
}