import react from 'react';
import { RiFolderUploadLine } from 'react-icons/ri';
import { RiEdit2Line } from 'react-icons/ri';
import { BiSolidEraser } from 'react-icons/bi';
import { RiDeleteBinLine } from 'react-icons/ri';
import { RiSave3Fill } from 'react-icons/ri';
import { MdHelp } from 'react-icons/md';
//TO-DO: refator to add constructor function to each icon
export default function LateralMenu({
  style,
  iconsSize = '3rem',
  iconsColor = 'black',
}: {
  style?: React.CSSProperties;
  iconsSize?: number | string;
  iconsColor?: string;
}) {
  const options: {
    Icon: ({ style }: { style?: React.CSSProperties }) => JSX.Element;
  }[] = [
    {
      Icon: () => (
        <RiFolderUploadLine
          style={{
            cursor: 'pointer',
          }}
          onClick={console.log}
          color={iconsColor}
          size={iconsSize}
        />
      ),
    },
    {
      Icon: () => (
        <RiEdit2Line
          style={{
            cursor: 'pointer',
          }}
          onClick={console.log}
          color={iconsColor}
          size={iconsSize}
        />
      ),
    },
    {
      Icon: () => (
        <BiSolidEraser
          style={{
            cursor: 'pointer',
          }}
          onClick={console.log}
          color={iconsColor}
          size={iconsSize}
        />
      ),
    },
    {
      Icon: () => (
        <RiDeleteBinLine
          style={{
            cursor: 'pointer',
          }}
          onClick={console.log}
          color={iconsColor}
          size={iconsSize}
        />
      ),
    },
    {
      Icon: () => (
        <RiSave3Fill
          style={{
            cursor: 'pointer',
          }}
          onClick={console.log}
          color={iconsColor}
          size={iconsSize}
        />
      ),
    },
    {
      Icon: () => (
        <MdHelp
          style={{
            cursor: 'pointer',
          }}
          onClick={console.log}
          color={iconsColor}
          size={iconsSize}
        />
      ),
    },
  ];
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        rowGap: '2rem',
        padding: '2rem',
        ...style,
      }}
    >
      {options.map((option) => (
        <>
          <option.Icon
            style={{
              cursor: 'pointer',
            }}
          ></option.Icon>
        </>
      ))}
    </div>
  );
}
