import {
  BottomNavigationBar as DSBottomNavigationBar,
  BottomNavigationBarItem as DSBottomNavigationBarItem,
  BottomNavigationBarProps,
  ItemRenderLinkComponent,
} from "@opensea/ui-kit"
import React, { ElementRef, forwardRef } from "react"
import { Link } from "../Link"

const NextBottomNavigationBarItem = Object.assign(
  forwardRef<
    ElementRef<typeof DSBottomNavigationBarItem>,
    BottomNavigationBarProps
  >(function NextBottomNavigationBarItem(props, ref) {
    return (
      <DSBottomNavigationBarItem
        renderLink={Link as ItemRenderLinkComponent}
        {...props}
        ref={ref}
      />
    )
  }),
  { Avatar: DSBottomNavigationBarItem.Avatar },
)

export const BottomNavigationBar = Object.assign({}, DSBottomNavigationBar, {
  Item: NextBottomNavigationBarItem,
})