import React from 'react';
import { FeaturedTripsProps } from './types';
import { isEmpty } from 'lodash';
import FeaturedTripCard from './featured-trip-card';

const FeaturedTrips: React.FC<FeaturedTripsProps> = ({ title, cards }) => {
  return (
    <div className="content">
      <div className="content__container">
        <div className="content__title__row">
          <h2 className="content__title">{title}</h2>
        </div>
        <div className="content__colums content__colums--4">{!isEmpty(cards) && cards.map((card, idx) => <FeaturedTripCard key={idx} {...card} />)}</div>
      </div>
    </div>
  );
};

export default FeaturedTrips;