import React from "react";
import TravelHeading from '../travel-heading';
import TravelService from './block';
import cars from './images/cars.png';
import financing from './images/financing.png';
import payments from './images/payments.png';
import insurance from './images/insurance.png';
import hotels from './images/hotels.png';
import flights from './images/flights.png';
const TravelServices = (props) => {
  const { TRAVEL_SERICES_URLS } = props
  return (
    <div className="services index-section" id='our-service'>
      <div className="container">
        <TravelHeading
          heading={ <>Our Services</> }
        />
        <div className="services__list">
          <TravelService
            img={ flights }
            url={TRAVEL_SERICES_URLS.flights}
            title={ <>Flights</> }
            detail={ <>Find the lowest fares, browse seating classes, and compare rates from worldwide</> }
          />
          <TravelService
            img={ hotels }
            url={TRAVEL_SERICES_URLS.hotels}
            title={ <>Hotels</> }
            detail={ <>Choose from millions of hotels worldwide. Book now, pay later</> }
          />
          <TravelService
            img={ cars }
            url={TRAVEL_SERICES_URLS.cars}
            title={ <>Cars</> }
            detail={ <>Browse short and long-term rentals from the most trusted names</> }
          />
          <TravelService
            img={ insurance }
            url={TRAVEL_SERICES_URLS.insurance}
            title={ <>Insurance</> }
            detail={ <>Protect your trip from delays, cancellations, and more with AIG’S Travel Guard</> }
          />
          <TravelService
            img={ payments }
            url={TRAVEL_SERICES_URLS.payments}
            title={ <>Payments</> }
            detail={ <>Send and receive money faster with Zelle</> }
          />
          <TravelService
            url={TRAVEL_SERICES_URLS.financing}
            img={ financing }
            title={ <>Financing</> }
            detail={ <>Book now, pay later</> }
          />
        </div>
      </div>
    </div>
  );
};

export default TravelServices;