import React from 'react';
import { Layout, Menu, theme } from 'antd';
const { Sider } = Layout;

export const SideMenu = ({ items }) => {
  items?.map((icon, index) => ({
    key: String(index + 1),
    icon: React.createElement(
      'img',
      { src: icon['menuicon'], height: '200px', width: '300px' },
      null
    ),

    label: icon['menuname'],
  }));

  return (
    <Layout hasSider>
      <Sider
        style={{
          overflow: 'auto',
          height: '100vh',
          position: 'fixed',
          left: 0,
          top: 0,
          bottom: 0,
          backgroundColor: '#dbe8f5',
        }}
      >
        <div
          style={{
            height: 32,
            margin: 16,
          }}
        />
        <Menu
          theme="white"
          style={{ color: 'black' }}
          mode="inline"
          defaultSelectedKeys={['4']}
          items={items}
        />
      </Sider>
    </Layout>
  );
};