import * as React from "react"

import { cn } from "@/lib/utils"

export type WorkspaceHeaderProps = React.ComponentProps<"header"> & {
  left?: React.ReactNode
  center?: React.ReactNode
  right?: React.ReactNode
  sticky?: boolean
  heightClassName?: string
}

function WorkspaceHeader({
  className,
  left,
  center,
  right,
  sticky = true,
  heightClassName = "h-14",
  children,
  ...props
}: WorkspaceHeaderProps) {
  return (
    <header
      data-slot="workspace-header"
      data-sticky={sticky || undefined}
      className={cn(
      "z-30 flex shrink-0 items-center gap-3 border-b bg-background px-4",
        sticky && "sticky top-0",
        heightClassName,
        className
      )}
      {...props}
    >
      {children ?? (
        <>
          {left && <div className="flex min-w-0 flex-1 items-center gap-2">{left}</div>}
          {center && <div className="hidden min-w-0 flex-1 items-center justify-center md:flex">{center}</div>}
          {right && <div className="ml-auto flex shrink-0 items-center gap-2">{right}</div>}
        </>
      )}
    </header>
  )
}

export { WorkspaceHeader }