ProductSlider

import {
  Badge,
  Icon,
  Image,
  PlainButton,
  ProductBox,
  ProductSlider,
  ProductSliderItem,
} from 'marketing-ui'
import { IconHeart } from 'icons'

function Demo() {
  return (
    <ProductSlider
      tagline={
        <span>
          <strong>SONAX</strong> XTREME Recommendations
        </span>
      }
      copy={
        <span>
          From the <strong>SONAX</strong>{' '}
          XTREME series, we have selected our top-performing products,
          engineered to set new bench-marks in performance and efficiency.
        </span>
      }
    >
      {new Array(6).fill(1).map(() => {
        return (
          <ProductSliderItem>
            <ProductBox
              badge={<Badge variant='brand' label='Neu' />}
              background='white'
              brand='SONAX'
              series='XTREME'
              name='XTREME Ceramic ScheibenKlar 2 in 1'
              packshot={
                <Image
                  data-image-size='product-box-packshot'
                  src='https://res.cloudinary.com/dznnkcrlw/image/upload/v1760695340/not16bfakvwp6fwt6n9t.png'
                />
              }
              price='24,99 €'
              actions={
                <PlainButton
                  aria-label='Add to favorites'
                  iconStart={<Icon i={IconHeart} />}
                />
              }
            />
          </ProductSliderItem>
        )
      })}
    </ProductSlider>
  )
}

export default Demo