import React, { Fragment, useEffect } from 'react';
import useScreenDimensions from '../hooks/useScreenDimensions';
import Wrapper from '../layout/Wrapper';
import FMCarousel from './shared/FMCarousel';
import HorizontalScroller from './shared/HorizontalScroller';
import PageHeading from './shared/PageHeading';
import PageTitle from './shared/PageTitle';
import TestimonialCard from './shared/TestimonialCard';
import Boza from './../assets/boza.jpg';
import Peter from './../assets/peter1.png';
import ns from './../assets/ns.png';

const _data = {
  heading: 'What Our Clients Said',
  subheading: 'Testimonials',
  cards: [
    {
      clientName: 'Peter Custer',
      paragraph:
        "Diligent is a highly valuable resource in GBI's arsenal. Reliable, versatile and skilled. They are a true representation of their company name - following through the entire process of any task we challenged them with, meeting, and exceeding, expectations regardless of the project environment.",
      clientRole: 'CTO @ Gold Bullion International',
      clientImg: Peter,
      alt: 'Peter Custer - CTO @ Gold Bullion International',
    },
    {
      clientName: 'Božidar Ignjatović',
      paragraph:
        "Diligent team is my old and reliable partner. We've been working together for more than a decade. They are highly skilled professionals for any assigned job. Do not hesitate if you need support, Diligent brings additional value. They are not only tech team, they'll be partners to your business as they were for ours!",
      clientRole: 'BadinSoft Co-Founder, CEO',
      clientImg: Boza,
      alt: 'Božidar Ignjatović - BadinSoft Co-Founder, CEO',
    },
    {
      clientName: 'Niš Ekspres',
      paragraph: `Our industry is susceptible, requiring the Information System to be reliable and flexible. Diligent helped us to build and integrate several parts of the existing Information System with multiple integration points and enabled fieldwork. Be assured that you can always count on the highest performance from Diligent, "around-the-clock" support and have a partner to your business.`,
      clientRole: '',
      clientImg: ns,
      alt: 'Niš Ekspres',
    },
  ],
};

export default function Testimonials({ noTitle }) {
  const screenSize = useScreenDimensions();

  return (
    <Wrapper padding={' py-90p'}>
      <div className="flex flex-col gap-32p md:gap-90p w-full">
        {!noTitle && (
          <div className="w-full">
            <PageTitle heading={_data.heading} subheading={_data.subheading} left />
          </div>
        )}

        <div className="relative w-full h-[500px] overflow-hidden">
          {screenSize.width > 1000 ? (
            <FMCarousel>
              <div className="flex">
                <TestimonialCard
                  clientName={_data.cards[0].clientName}
                  clientRole={_data.cards[0].clientRole}
                  clientImg={_data.cards[0].clientImg}
                  imageAlt={_data.cards[0].alt}
                  paragraph={_data.cards[0].paragraph}
                />
                <TestimonialCard
                  clientName={_data.cards[1].clientName}
                  clientRole={_data.cards[1].clientRole}
                  clientImg={_data.cards[1].clientImg}
                  imageAlt={_data.cards[1].alt}
                  paragraph={_data.cards[1].paragraph}
                />
              </div>
              <div className="flex">
                <TestimonialCard
                  clientName={_data.cards[2].clientName}
                  clientRole={_data.cards[2].clientRole}
                  clientImg={_data.cards[2].clientImg}
                  imageAlt={_data.cards[2].alt}
                  paragraph={_data.cards[2].paragraph}
                />
              </div>
              {/* 
                    <TestimonialCard/>
                    <TestimonialCard/>
                    */}
            </FMCarousel>
          ) : (
            <FMCarousel>
              <TestimonialCard
                clientName={_data.cards[0].clientName}
                clientRole={_data.cards[0].clientRole}
                clientImg={_data.cards[0].clientImg}
                imageAlt={_data.cards[0].alt}
                paragraph={_data.cards[0].paragraph}
              />
              <TestimonialCard
                clientName={_data.cards[1].clientName}
                clientRole={_data.cards[1].clientRole}
                clientImg={_data.cards[1].clientImg}
                imageAlt={_data.cards[1].alt}
                paragraph={_data.cards[1].paragraph}
              />
              <TestimonialCard
                clientName={_data.cards[2].clientName}
                clientRole={_data.cards[2].clientRole}
                clientImg={_data.cards[2].clientImg}
                imageAlt={_data.cards[2].alt}
                paragraph={_data.cards[2].paragraph}
              />
            </FMCarousel>
          )}
        </div>
      </div>
    </Wrapper>
  );
}
