import React, { FC, PropsWithChildren } from 'react';
import { ListIcon, ListItem as ChakraListItem } from '@chakra-ui/react';
import { IconType } from 'react-icons';

export type ListItemProps = PropsWithChildren & {
  Icon: IconType;
};

export const ListItem: FC<ListItemProps> = ({ Icon, children }) => {
  return (
    <ChakraListItem display='inline-flex'>
      <ListIcon as={Icon} color='primary.500' boxSize='6' />
      {children}
    </ChakraListItem>
  );
};
