"use client"
import {
  Dropdown as DSDropdown,
  DropdownItemProps as DSDropdownItemProps,
  ItemRenderLinkComponent,
} from "@opensea/ui-kit"
import React, { ElementRef, forwardRef } from "react"
import { Link } from "../Link"

export type DropdownItemProps = Omit<DSDropdownItemProps, "renderLink">

const NextDropdownItem = Object.assign(
  forwardRef<ElementRef<typeof DSDropdown.Item>, DropdownItemProps>(
    function NextDropdownItem(props, ref) {
      return (
        <DSDropdown.Item
          renderLink={Link as ItemRenderLinkComponent}
          {...props}
          ref={ref}
        />
      )
    },
  ),
  {
    Avatar: DSDropdown.Item.Avatar,
    Title: DSDropdown.Item.Title,
    Content: DSDropdown.Item.Content,
    Description: DSDropdown.Item.Description,
  },
)

export const Dropdown = Object.assign({}, DSDropdown, {
  Item: NextDropdownItem,
})