// import { Flex } from "../components/flex";
import { Button } from 'antd';
import React, { useEffect, useRef, useState } from 'react';

export type ImageMapItemsProps = {
  ref: any;
  canvasRef: any;
  descriptors: Record<string, any>;
};

const ImageMapItems: React.FC<ImageMapItemsProps> = (props) => {
  const { descriptors } = props;

//   const renderItems = (items) => (
//     <Flex flexWrap="wrap" flexDirection="column" style={{ width: '100%' }}>
//       {items.map((item) => renderItem(item))}
//     </Flex>
//   );

console.log(descriptors,'descriptors')

  return (
    <ul>
      {descriptors && Object.keys(descriptors).map((key) => (
        <li key={key} style={{marginBottom: 12}}>
            <Button type='primary'> {key}</Button>
        </li>
      ))}
    </ul>
  );
};

export default ImageMapItems;
