"use client";
import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, useDisclosure } from '@nextui-org/react'
import { MoreVerticalIcon } from 'lucide-react'
import React from 'react'
import ImportModal from './ImportModal';
import ProductModal from './ProductModal';
import getClientCredential from '@/common/libs/getClientCredential';

const MoreMenu = () => {
  const credential = getClientCredential()
  const importModal = useDisclosure();
  const productModal = useDisclosure();

  return credential && credential.team == 'VERIFICATION' && (
    <>
      <Dropdown>
        <DropdownTrigger>
          <Button variant="flat" className="px-2.5 min-w-fit">
            <MoreVerticalIcon size={20} />
          </Button>
        </DropdownTrigger>
        <DropdownMenu>
          <DropdownItem key="product" onPress={productModal.onOpen}>
            Product List
          </DropdownItem>
          <DropdownItem key="import" onPress={importModal.onOpen}>
            Import Product
          </DropdownItem>
        </DropdownMenu>
      </Dropdown>

      <ProductModal modal={productModal} />
      <ImportModal modal={importModal} />
    </>
  )
}

export default MoreMenu