import React, { useEffect, useState } from 'react';
import { JeepItem } from '../../mainComponents/JeepItem/JeepItem';
import { PAGE_NAME } from '../../utils/constants';
import s from './SelectJeep.module.scss';
console.log('s123: ', s);
import Carousel from 'react-elastic-carousel';

export const SelectJeep = React.memo(({ ...props }: any) => {
  const { OpenJeep2DoorJL, OpenJeep4DoorJL, OpenJeepGladiator }: any = props;
  const jeepData = [
    {
      id: 'Jeep1',
      img: 'https://i.ibb.co/R3Zv7fT/Jeep-2dl.png',
      title: 'Wrangler JL',
      description:
        'Totally reworked from the ground up, this latest generation two-door Wrangler still retains traditional Jeep styling, but now blends it with vastly improved user friendliness, enhanced electrical upgrades and refined ride quality and handling, all while offering powertrain and engine options not available in previous versions.',
      readMore: 'https://www.quadratec.com/',
      link: OpenJeep2DoorJL,
    },
    {
      id: 'Jeep2',
      img: 'https://i.ibb.co/HVtb61Z/Jeep-4dl.png',
      title: 'Wrangler JL Unlimited',
      description:
        'With its revised roomier interior and modern upgrades such as a zipperless soft top, lightweight doors, hood and tailgate, heated steering wheel and seats, and a more aerodynamic windshield frame, the four-door Wrangler Unlimited provides everything a growing family needs for space while still offering rugged, go anywhere capability.',
      readMore: 'https://www.quadratec.com/',
      link: OpenJeep4DoorJL,
    },
    {
      id: 'Jeep3',
      img: 'https://i.ibb.co/dgYyn1Q/Jeep-gladiator.png',
      title: 'Gladiator',
      description:
        'The first truck in Jeep’s stable since the early 1990s blends performance, functionality and rugged capability into something that seems as much at home on the highway as it does an off-road trail. And with several different engine and powertrain options, as well as the added dimension of a cargo bed and towing ability, the Gladiator is an appealing option not only for Wrangler lovers looking for something larger, but for every truck fan out there.',
      readMore: 'https://www.quadratec.com/',
      link: OpenJeepGladiator,
    },
  ];

  return (
    <div className={`${s.main_container}`}>
      <div className={s.title}>Choose your Jeep</div>
      <div className={s.wrapper}>
        {jeepData &&
          jeepData.map((item: any) => (
            <JeepItem
              key={item.id}
              img={item.img}
              title={item.title}
              description={item.description}
              readMore={item.readMore}
              link={item.link}
            />
          ))}
      </div>
      <div className={`${s.mobile__wrapper} jeep_slider`}>
        <Carousel isRTL={true} itemsToShow={1}>
          {jeepData &&
            jeepData.map((item: any) => (
              <JeepItem
                key={item.id}
                img={item.img}
                title={item.title}
                description={item.description}
                readMore={item.readMore}
                link={item.link}
              />
            ))}
        </Carousel>
      </div>
    </div>
  );
});