import BrandRepeater from '@/components/organisms/BrandRepeater'
import PropTypes from 'prop-types'
/**
 * Handle the brandRepeaterBlock block.
 *
 * @author WebDevStudios
 * @param {object} props The props.
 * @param {object} props.attributes The attributes object.
 * @return {Element} The component.
 */
export default function BrandepeaterBlock({attributes}) {
 const {data} = attributes
 let images = []
 // Prepare repeater data for mapping
 for (let z = 0; z < attributes.data.brand; z++) {
 images.push({
 image: data[`brand_${z}_image`],
 title: data[`brand_${z}_title`],
 caption: data[`brand_${z}_image_caption`],
 content: data[`brand_${z}_content`],
 buttonText: data[`brand_${z}_button_text`],
 buttonURL: data[`brand_${z}_button_url`]
 })
 }
 return (
 <>
 {attributes ? (
 <BrandRepeater {...attributes.data} images={images} />
 ) : (
 'There was a problem with attributes in BrandRepeater.js.'
 )}
 </>
 )
}
BrandepeaterBlock.propTypes = {
 attributes: PropTypes.object
}

import DisplayImage from '@/components/atoms/Image'
import cn from 'classnames'
import PropTypes from 'prop-types'
import React from 'react'
import styles from './BrandRepeater.module.css'
import InnerHTML from 'dangerously-set-html-content'
/**
 * Render the LogoRepeater component.
 *
 * @param {object} props LogoRepeater component props.
 * @param {Array} props.images The images from LogoRepeaterBlock
 * @param {Array} props.imageMetas The images metadata
 * @param props.caption
 * @param props.color
 * @return {Element} The LogoRepeater component.
 */
export default function BrandRepeater({images, imageMetas, color}) {
 return (
 <section className={cn(styles.container)}>
 {images.map((image, i) => {
 let currMeta = imageMetas[i]
 return (
 <div key={i} className={styles.BrandRepeater} style={{color}}>
 <div className={cn(styles.media)}>
 <DisplayImage
 className={styles.imageWrap}
 id={image}
 alt={currMeta?.altText}
 imageMeta={currMeta}
 nextImageFill={true}
 />
 <div className={styles.caption}>
 <p>{image.caption}</p>
 </div>
 </div>
 <div className={styles.content}>
 <h3>{image.title}</h3>
 <InnerHTML html={image.content} />
 {!image.buttonURL ? null : (
 <a className={styles.link} href={image.buttonURL}>
 {image.buttonText}
 </a>
 )}
 </div>
 </div>
 )
 })}
 </section>
 )
}
BrandRepeater.propTypes = {
 images: PropTypes.array,
 imageMetas: PropTypes.array
}