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

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

/**
 * @deprecated use a <li /> element instead
 */
const ListItem = forwardRef<HTMLLIElement, BoxProps>((props, ref) => {
  return <Box {...props} ref={ref} as="li" />;
});

/**
 * @deprecated use a <ol /> or <ul /> elements instead
 */
const List = forwardRef<HTMLOListElement | HTMLUListElement, ListProps>(
  (props, ref) => {
    const { as = "ul", ...rest } = props;

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

const CompoundList = Object.assign(List, {
  Item: ListItem,
});

export { CompoundList as List };