"use client"

import * as React from "react"
import { Combobox as BaseCombobox } from "@base-ui/react/combobox"
import { cn } from "@/lib/utils"

export type ComboboxItemProps = React.ComponentPropsWithoutRef<typeof BaseCombobox.Item> & {
  className?: string
}

const BaseComboboxItem = BaseCombobox.Item as React.ElementType

export const ComboboxItem = React.forwardRef<HTMLElement, ComboboxItemProps>(
  ({ className, ...props }, ref) => (
    <BaseComboboxItem
      ref={ref}
      className={cn(
        "grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white",
        className,
      )}
      {...props}
    />
  ),
)

ComboboxItem.displayName = "ComboboxItem"