import { Menu, MenuProps } from "antd";
import { FC } from "react";
import LogoImage from "@/assets/images/logo.png";
import style from "./index.module.scss";
import { RouteType } from "../../types";
import Sider from "antd/es/layout/Sider";

export interface LayoutSiderProps extends MenuProps {
  items: RouteType[];
}

export const LayoutSider: FC<LayoutSiderProps> = (props) => {
  return (
    <Sider
      width={220}
      style={{
        position: "fixed",
        top: 0,
        left: 0,
        bottom: 0,
        background: "var(--primary-color)",
      }}
    >
      <div className={style.logo}>
        <img draggable="false" alt="logo" src={LogoImage} />
      </div>

      <Menu className="layout-menu" mode="inline" {...props} />
    </Sider>
  );
};
