import React, { useEffect } from 'react';
import { useProductByUpc } from 'src/apollo/queries/product-search';

interface ContractTermProductNameProps {
    productUpc: string;
}

export default function ContractTermProductName({
    productUpc,
}: ContractTermProductNameProps) {
    const { data: productData, getProductByUpc } = useProductByUpc();

    useEffect(() => {
        getProductByUpc(productUpc);
    }, []);

    const productName = productData?.productByUpc?.productName || '';

    return (
        <div className="Product">
            <span className="Product-name">{productName}</span> -
            <div />
            <span className="Product-upc">{productUpc}</span>
        </div>
    );
}