import React from 'react';
import { Button, Dropdown, Menu } from 'antd';
import { TagOutlined, CheckOutlined, CloudUploadOutlined, BarcodeOutlined, DownOutlined, ShopOutlined, PictureOutlined } from '@ant-design/icons';

const ProductActionBar = ({ onSetCategory, onPushToKaufland, onSetEan, onSetManufacturer, onManageImages }) => {
  const menuItems = [
    {
      key: 'setCategory',
      icon: <TagOutlined />,
      label: 'Set Category',
      onClick: onSetCategory
    },
    {
      key: 'setEan',
      icon: <BarcodeOutlined />,
      label: 'Set EAN',
      onClick: onSetEan
    },
    {
      key: 'setManufacturer',
      icon: <ShopOutlined />,
      label: 'Set Manufacturer',
      onClick: onSetManufacturer
    },
    {
      key: 'manageImages',
      icon: <PictureOutlined />,
      label: 'Manage Images',
      onClick: onManageImages
    },
    {
      key: 'validateProduct',
      icon: <CheckOutlined />,
      label: 'Validate Product'
    },
    {
      key: 'pushToKaufland',
      icon: <CloudUploadOutlined />,
      label: 'Push to Kaufland',
      onClick: onPushToKaufland
    }
  ];

  return (
    <Dropdown
      menu={{ items: menuItems }}
      trigger={["click"]}
    >
      <Button
        type="primary"
        onClick={(e) => e.stopPropagation()}
        style={{ width: '100%', zIndex: 1000 }}
      >
        <span>Actions <DownOutlined /></span>
      </Button>
    </Dropdown>
  );
};

export default ProductActionBar;