import { motion } from 'motion/react';
import ProductListTable from './ProductListTable';
import PropTypes from 'prop-types';

function ProductModal({ productInfo, handleProductSelect }) {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      key="productList"
      className="fixed z-50 inset-0 flex items-center justify-center bg-black/50"
    >
      <motion.div
        initial={{ y: 15, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        exit={{ y: 15, opacity: 0 }}
        className="flex flex-col items-center bg-white p-4 py-8 rounded-3xl w-[60%] max-h-[80%] overflow-auto font-body"
      >
        <h2 className="text-xl mb-4">Select Product</h2>
        <ProductListTable productInfo={productInfo} onSelectProduct={handleProductSelect} />
      </motion.div>
    </motion.div>
  );
}

ProductModal.propTypes = {
  productInfo: PropTypes.object.isRequired,
  handleProductSelect: PropTypes.func.isRequired,
};

export default ProductModal;