import React from 'react';
import { Menu } from 'antd';
import { 
  DashboardOutlined, 
  ShoppingOutlined, 
  OrderedListOutlined, 
  TabletOutlined, 
  InboxOutlined, 
  TeamOutlined, 
  DollarOutlined, 
  SafetyCertificateOutlined, 
  SettingOutlined,
  HomeOutlined
} from '@ant-design/icons';
import { Link, useLocation } from 'react-router-dom';

const MenuComponent: React.FC = () => {
  const location = useLocation();
  const currentPath = location.pathname;

  const menuItems = [
    {
      key: '/dashboard',
      icon: <DashboardOutlined />,
      label: <Link to="/dashboard">Dashboard</Link>,
    },
    {
      key: '/product',
      icon: <ShoppingOutlined />,
      label: <Link to="/product">Product</Link>,
    },
    {
      key: '/orders',
      icon: <OrderedListOutlined />,
      label: <Link to="/orders">Orders</Link>,
    },
    {
      key: '/ad',
      icon: <TabletOutlined />,
      label: <Link to="/ad">Ad</Link>,
    },
    {
      key: '/inventory',
      icon: <InboxOutlined />,
      label: <Link to="/inventory">Inventory</Link>,
    },
    {
      key: '/b2b',
      icon: <TeamOutlined />,
      label: <Link to="/b2b">B2B</Link>,
    },
    {
      key: '/finance',
      icon: <DollarOutlined />,
      label: <Link to="/finance">Finance</Link>,
    },
    {
      key: '/compliance',
      icon: <SafetyCertificateOutlined />,
      label: <Link to="/compliance">Compliance</Link>,
    },
    {
      key: '/settings',
      icon: <SettingOutlined />,
      label: <Link to="/settings">Settings</Link>,
    },
    {
      key: '/independent-site',
      icon: <HomeOutlined />,
      label: <Link to="/independent-site">Independent Site</Link>,
    },
  ];

  return (
    <div className="menu-container">
      <Menu
        mode="inline"
        selectedKeys={[currentPath]}
        style={{
          height: '100%',
          borderRight: 0,
        }}
        items={menuItems}
      />
    </div>
  );
};

export default MenuComponent;