import React from 'react';
import { Text, Flexbox } from "@evlop/native-components";
import { useMetafields } from "@evlop/shopify";

const AppBlock: NativeAppBlock = function ({ product }) {
  
  // Load metafields for the product
  const productMetafields = useMetafields({ 
    resourceType: "product",
    resourceId: String(product?.id),
    metafieldIdentifiers: [
      { namespace: 'custom', key: 'color' },
      { namespace: 'custom', key: 'size' },
    ] 
  });

  return (
    <Flexbox flexDirection="column" gap="3xs" p="md">
      <Text fontWeight="Bold" fontSize="3xl">Additional information:</Text>
      <Flexbox gap="md">
        <Text fontWeight="Bold">Color:</Text> 
        <Text color="gray-800">{productMetafields?.custom?.color || "Unknown"}</Text>
      </Flexbox>
      <Flexbox gap="md">
        <Text fontWeight="Bold">Size:</Text> 
        <Text color="gray-800">{productMetafields?.custom?.size || "Unknown"}</Text>
      </Flexbox>
    </Flexbox>
  );
};

export default AppBlock;

{}