'use client';

import { Listbox as ChakraListbox } from '@chakra-ui/react';
import * as React from 'react';

export const ListboxRoot = React.forwardRef<HTMLDivElement, ChakraListbox.RootProps>(function ListboxRoot(props, ref) {
  return <ChakraListbox.Root {...props} ref={ref} />;
}) as ChakraListbox.RootComponent;

export const ListboxContent = React.forwardRef<HTMLDivElement, ChakraListbox.ContentProps>(
  function ListboxContent(props, ref) {
    return <ChakraListbox.Content {...props} ref={ref} />;
  },
);

export const ListboxItem = React.forwardRef<HTMLDivElement, ChakraListbox.ItemProps>(function ListboxItem(props, ref) {
  const { children, ...rest } = props;
  return (
    <ChakraListbox.Item {...rest} ref={ref}>
      {children}
      <ChakraListbox.ItemIndicator />
    </ChakraListbox.Item>
  );
});

export const ListboxLabel = ChakraListbox.Label;
export const ListboxItemText = ChakraListbox.ItemText;
export const ListboxEmpty = ChakraListbox.Empty;