functional

functional.js

import React from 'react';
import classnames from 'classnames';
import { getOr } from 'lodash/fp';
// styles
import styles from './highlights.scss';

const Offer = ({
  highlights = [],
  className,
  image = 'https://s3-sa-east-1.amazonaws.com/chefs-salles/imagens/sem-foto.png',
  handleClick = () => {},
  ...others
}) => {
  const addDefaultSrc = event => {
    event.target.src = image;
  };

  return (
    <section {...others} className={classnames(styles.highlights, className)}>
      {highlights.map(item => (
        <div
          data-testid="highlight"
          key={item.uuid}
          className={styles['highlights-item']}
          onClick={handleClick(getOr(false, 'rizzo_url', item))}
        >
          <figure className={styles['highlights-figure']}>
            <img
              onError={addDefaultSrc}
              className={styles['highlights-image']}
              src={getOr(image, 'thumb', item.photos[0])}
            />
          </figure>
          <div className={styles['highlights-description']}>
            <div className={styles['highlights-description-top']}>
              <div>
                <h3 className={styles['highlights-name']}>{item.name}</h3>
                <p className={styles['highlights-neighborhood']}>{item.address.neighbourhood}</p>
                <p className={styles['highlights-neighborhood']}>{item.main_cuisine}</p>
              </div>
              {item.average_rating > 0 && (
                <div className={styles.rating}>
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.867 53.867" width="16">
                    <path
                      fill="#ffbb00"
                      d="M26.934 1.318l8.322 16.864 18.611 2.705L40.4 34.013l3.179 18.536-16.645-8.751-16.646 8.751 3.179-18.536L0 20.887l18.611-2.705z"
                    />
                  </svg>
                  <span className={styles['rating-number']}>{item.average_rating.toFixed(1)}</span>
                </div>
              )}
            </div>
          </div>
        </div>
      ))}
    </section>
  );
};

export default Offer;