
const ProductInfo = ({ data }:{data:any}) => {
  const { t } = useTranslation();

  const ProductCollectionArray = data?.collections 
  ? data.collections.flatMap((collection:any) => {
      const { collectionParam, ...rest } = collection;
      return Object.entries(rest).map(([key, value]) => ({
        key,
        value
      }));
    })
  : [];

  const midpoint = Math.ceil(ProductCollectionArray.length / 2);
  const leftSection = ProductCollectionArray.slice(0, midpoint);
  const rightSection = ProductCollectionArray.slice(midpoint);

  return (
    <div className='product_info'>
      <h1>{t("allocation")}</h1>

      <div className='details'>
        <div className='left'>
          {leftSection.map((e:any) => (
            <span >{t(e.key)} <span>{e.value}</span></span>
          ))}
        </div>
        <div className='right'>
          {rightSection.map((e:any) => (
            <span >{t(e.key)} <span>{e.value}</span></span>
          ))}
        </div>
      </div>
    </div>
  );
}

export default ProductInfo;