import type { ReactNode } from 'react'
import { cn } from '@admin/utils/shared/cn'

export function EditorToolbar({
  ariaLabel,
  children,
  className
}: {
  ariaLabel: string
  children: ReactNode
  className?: string
}) {
  return (
    <div
      role="toolbar"
      aria-label={ariaLabel}
      className={cn(
        'sticky top-0 z-10 flex min-h-12 w-full items-center gap-1 overflow-x-auto overscroll-x-contain border-b border-border bg-card px-2 [scrollbar-width:none] max-[480px]:absolute max-[480px]:top-auto max-[480px]:h-[calc(2.75rem+env(safe-area-inset-bottom,0px))] max-[480px]:flex-nowrap max-[480px]:justify-start max-[480px]:border-t max-[480px]:border-b-0 max-[480px]:pb-[env(safe-area-inset-bottom,0px)] [&::-webkit-scrollbar]:hidden',
        className
      )}
    >
      {children}
    </div>
  )
}