Untitled

import React, {useState, useEffect} from 'react';
import {Spinner} from 'vtex.styleguide';
import {useCssHandles} from 'vtex.css-handles';
import {useProduct} from 'vtex.product-context';
import './index.css';

const CSS_HANDLES = [
  'BenefitIconsPdpBoxItems',
  'BenefitIconsPdpItem',
  'BenefitIconsPdpItemImage',
  'BenefitIconsPdpItemDescription',
  'BenefitIconsPdpItemItemTitle',
  'BenefitIconsPdpItemItemText',
  'BenefitIconsPdpItemImageLottie',
];

const BenefitIconsProductDetail = () => {
  const handles = useCssHandles(CSS_HANDLES);
  const [loading, setLoading] = useState(true);
  const {product} = useProduct();

  let specificationGroups = product?.specificationGroups ?? [];
  let specificationGroupsEnd = specificationGroups[0].specifications;
  //console.log(specificationGroupsEnd);

  let itemDescripcion1 = specificationGroupsEnd.filter((data: {name: string}) => data.name === 'Libre de Granos - Descripción');
  let itemDescripcion2 = specificationGroupsEnd.filter((data: {name: string}) => data.name === 'Cuidado Digestivo - Descripción');
  let itemDescripcion3 = specificationGroupsEnd.filter((data: {name: string}) => data.name === 'Control de Peso - Descripción');
  let itemDescripcion4 = specificationGroupsEnd.filter((data: {name: string}) => data.name === 'Cuidado Dental - Descripción');
  let itemDescripcion5 = specificationGroupsEnd.filter((data: {name: string}) => data.name === 'Cuidado Piel y Pelaje - Descripción');
  let itemDescripcion6 = specificationGroupsEnd.filter((data: {name: string}) => data.name === 'Contiene Omega 3 - Descripción');
  let itemDescripcion7 = specificationGroupsEnd.filter((data: {name: string}) => data.name === 'Cuidado Articular - Descripción');
  let itemDescripcion8 = specificationGroupsEnd.filter((data: {name: string}) => data.name === 'Cognición Cerebral - Descripción');

  useEffect(() => {
    setLoading(false);
  }, []);

  return (
    <div>
      {loading ? (
        <div style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
          <Spinner />
        </div>
      ) : (
        <div className={handles.BenefitIconsPdpBoxItems}>
          {specificationGroupsEnd.map((specification: {name: string}) => {
            if (specification.name === 'Libre de Granos' && itemDescripcion1[0].values[0].length !== 0) {
              return (
                <div className={handles.BenefitIconsPdpItem}>
                  <div className={handles.BenefitIconsPdpItemImage}>
                    <img
                      src="https://fish4pet.vtexassets.com/arquivos/FISH4PETS-ICON-GRANO-PDP.svg"
                      alt="Fish4Pets"
                      loading="lazy"
                      width={120}
                    />
                  </div>
                  <div className={handles.BenefitIconsPdpItemDescription}>
                    <h3 className={handles.BenefitIconsPdpItemItemTitle}>Libre de Granos</h3>
                    <p className={handles.BenefitIconsPdpItemItemText}>{itemDescripcion1[0].values[0]}</p>
                  </div>
                </div>
              );
            }

            if (specification.name === 'Cuidado Digestivo' && itemDescripcion2[0].values[0].length !== 0) {
              return (
                <div className={handles.BenefitIconsPdpItem}>
                  <div className={handles.BenefitIconsPdpItemImage}>
                    <img
                      src="https://fish4pet.vtexassets.com/arquivos/FISH4PETS-ICON-DIGESTIVE-PDP.svg"
                      alt="Fish4Pets"
                      loading="lazy"
                      width={120}
                    />
                  </div>
                  <div className={handles.BenefitIconsPdpItemDescription}>
                    <h3 className={handles.BenefitIconsPdpItemItemTitle}>Cuidado Digestivo</h3>
                    <p className={handles.BenefitIconsPdpItemItemText}>{itemDescripcion2[0].values[0]}</p>
                  </div>
                </div>
              );
            }
            if (specification.name === 'Control de Peso' && itemDescripcion3[0].values[0].length !== 0) {
              return (
                <div className={handles.BenefitIconsPdpItem}>
                  <div className={handles.BenefitIconsPdpItemImage}>
                    <img
                      src="https://fish4pet.vtexassets.com/arquivos/FISH4PETS-ICON-PESO-PDP.svg"
                      alt="Fish4Pets"
                      loading="lazy"
                      width={120}
                    />
                  </div>
                  <div className={handles.BenefitIconsPdpItemDescription}>
                    <h3 className={handles.BenefitIconsPdpItemItemTitle}>Control de Peso</h3>
                    <p className={handles.BenefitIconsPdpItemItemText}>{itemDescripcion3[0].values[0]}</p>
                  </div>
                </div>
              );
            }

            if (specification.name === 'Cuidado Dental' && itemDescripcion4[0].values[0].length !== 0) {
              return (
                <div className={handles.BenefitIconsPdpItem}>
                  <div className={handles.BenefitIconsPdpItemImage}>
                    <img
                      src="https://fish4pet.vtexassets.com/arquivos/FISH4PETS-ICON-DENTAL-PDP.svg"
                      alt="Fish4Pets"
                      loading="lazy"
                      width={120}
                    />
                  </div>
                  <div className={handles.BenefitIconsPdpItemDescription}>
                    <h3 className={handles.BenefitIconsPdpItemItemTitle}>Cuidado Dental</h3>
                    <p className={handles.BenefitIconsPdpItemItemText}>{itemDescripcion4[0].values[0]}</p>
                  </div>
                </div>
              );
            }

            if (specification.name === 'Cuidado Piel y Pelaje' && itemDescripcion5[0].values[0].length !== 0) {
              return (
                <div className={handles.BenefitIconsPdpItem}>
                  <div className={handles.BenefitIconsPdpItemImage}>
                    <img
                      src="https://fish4pet.vtexassets.com/arquivos/FISH4PETS-ICON-PIEL-PDP.svg"
                      alt="Fish4Pets"
                      loading="lazy"
                      width={120}
                    />
                  </div>
                  <div className={handles.BenefitIconsPdpItemDescription}>
                    <h3 className={handles.BenefitIconsPdpItemItemTitle}>Cuidado Piel y Pelaje</h3>
                    <p className={handles.BenefitIconsPdpItemItemText}>{itemDescripcion5[0].values[0]}</p>
                  </div>
                </div>
              );
            }
            if (specification.name === 'Contiene Omega 3' && itemDescripcion6[0].values[0].length !== 0) {
              return (
                <div className={handles.BenefitIconsPdpItem}>
                  <div className={handles.BenefitIconsPdpItemImage}>
                    <img
                      src="https://fish4pet.vtexassets.com/arquivos/FISH4PETS-ICON-OMEGA-3-PDP.svg"
                      alt="Fish4Pets"
                      loading="lazy"
                      width={120}
                    />
                  </div>
                  <div className={handles.BenefitIconsPdpItemDescription}>
                    <h3 className={handles.BenefitIconsPdpItemItemTitle}>Contiene Omega 3</h3>
                    <p className={handles.BenefitIconsPdpItemItemText}>{itemDescripcion6[0].values[0]}</p>
                  </div>
                </div>
              );
            }
            if (specification.name === 'Cuidado Articular' && itemDescripcion7[0].values[0].length !== 0) {
              return (
                <div className={handles.BenefitIconsPdpItem}>
                  <div className={handles.BenefitIconsPdpItemImage}>
                    <img
                      src="https://fish4pet.vtexassets.com/arquivos/FISH4PETS-ICON-ARTICULAR-PDP.svg"
                      alt="Fish4Pets"
                      loading="lazy"
                      width={120}
                    />
                  </div>
                  <div className={handles.BenefitIconsPdpItemDescription}>
                    <h3 className={handles.BenefitIconsPdpItemItemTitle}>Cuidado Articular</h3>
                    <p className={handles.BenefitIconsPdpItemItemText}>{itemDescripcion7[0].values[0]}</p>
                  </div>
                </div>
              );
            }
            if (specification.name === 'Cognición Cerebral' && itemDescripcion8[0].values[0].length !== 0) {
              return (
                <div className={handles.BenefitIconsPdpItem}>
                  <div className={handles.BenefitIconsPdpItemImage}>
                    <img
                      src="https://fish4pet.vtexassets.com/arquivos/FISH4PETS-ICON-CEREBRAL-PDP.svg"
                      alt="Fish4Pets"
                      loading="lazy"
                      width={120}
                    />
                  </div>
                  <div className={handles.BenefitIconsPdpItemDescription}>
                    <h3 className={handles.BenefitIconsPdpItemItemTitle}>Cognición Cerebral</h3>
                    <p className={handles.BenefitIconsPdpItemItemText}>{itemDescripcion8[0].values[0]}</p>
                  </div>
                </div>
              );
            }
          })}
        </div>
      )}
    </div>
  );
};

export default BenefitIconsProductDetail;