import React, { forwardRef, ForwardRefExoticComponent } from "react";
import { Box, BoxProps } from "../Box";

interface ListProps extends BoxProps {
  as?: "ol" | "ul";
}

export type ListWithItem = ForwardRefExoticComponent<ListProps> & {
  Item: ForwardRefExoticComponent<BoxProps>;
};

const ListItem = forwardRef<HTMLLIElement, BoxProps>((props, ref) => {
  return <Box {...props} ref={ref} as="li" />;
});

const List = forwardRef<HTMLOListElement | HTMLUListElement, ListProps>(
  (props, ref) => {
    const { as = "ul", ...rest } = props;

    return <Box {...rest} as={as} ref={ref} />;
  },
) as ListWithItem;

List.Item = ListItem;

export { List };