"use client"
import {
  Sidebar as DSSidebar,
  SidebarItem as DSSidebarItem,
  ItemRenderLinkComponent,
} from "@opensea/ui-kit"
import React, { ComponentRef, forwardRef } from "react"
import { ItemProps } from "../Item"
import { Link } from "../Link"

type SidebarItemProps = {
  active?: boolean
  renderItem?: React.ComponentType<ItemProps>
  size?: "sm" | "md"
} & ItemProps

const NextSidebarItem = Object.assign(
  forwardRef<ComponentRef<typeof DSSidebarItem>, SidebarItemProps>(
    function NextSidebarItem(props, ref) {
      return (
        <DSSidebarItem
          renderLink={Link as ItemRenderLinkComponent}
          {...props}
          ref={ref}
        />
      )
    },
  ),
  {
    Avatar: DSSidebarItem.Avatar,
    Title: DSSidebarItem.Title,
  },
)

export const Sidebar = Object.assign({}, DSSidebar, {
  Item: NextSidebarItem,
})