/* 
  This is the auth side card component.
  It contains the following components:
  - AuthSideCard
*/
import React from "react";
import styles from "./AuthSideCard.module.scss"
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/navigation';
import { Navigation } from 'swiper/modules';
import Image from "next/image";
import ImagesConstants from "@/src/utils/ImagesConstants";

// Define the props type for the AuthSideCard component
const AuthSideCard: React.FC = () => {
    const swiperContent = [
        {
            description: `This platform makes it so easy to browse and book places tailored for people like me. I can't wait for the Business, Tribes, and Tools features to launch – having everything in one place would be a dream!`,
            userName: `Sarah T.`,
            userPoition: `Digital Nomad from New York, USA`
        },
        {
            description: `This platform makes it so easy to browse and book places tailored for people like me. I can't wait for the Business, Tribes, and Tools features to launch – having everything in one place would be a dream!`,
            userName: `Sarah T.`,
            userPoition: `Digital Nomad from New York, USA`
        },
        {
            description: `This platform makes it so easy to browse and book places tailored for people like me. I can't wait for the Business, Tribes, and Tools features to launch – having everything in one place would be a dream!`,
            userName: `Sarah T.`,
            userPoition: `Digital Nomad from New York, USA`
        }
    ]
    const remoteUserImages = [
        ImagesConstants.AUTH_SIDE_CARD_IMAGE_1, ImagesConstants.AUTH_SIDE_CARD_IMAGE_2, ImagesConstants.AUTH_SIDE_CARD_IMAGE_3, ImagesConstants.AUTH_SIDE_CARD_IMAGE_4, ImagesConstants.AUTH_SIDE_CARD_IMAGE_5, ImagesConstants.AUTH_SIDE_CARD_IMAGE_6, ImagesConstants.AUTH_SIDE_CARD_IMAGE_7
    ]
    return <>
        {/* Main wrapper of AuthSideCard section */}
        <div className={`${styles.authContentCard}`}>
            <h1 className={styles.mainTitle}>What our users said...</h1>
            <div className={styles.authSlider}>
                <span className={`icon IconQuote ${styles.iconQuote}`}></span>
                {/* Swiper container */}
                <Swiper
                    className="swiper-slider"
                    navigation={true}
                    modules={[Navigation]}
                >
                    {swiperContent?.map((items, i) => {
                        return (
                            <SwiperSlide key={i}>
                                <div className={`${styles.slideContent}`}>
                                    <p className={`fs-18`}>“{items?.description}"</p>
                                    <div className={styles.userDetail}>
                                        <h3 className={`${styles.h4} ${styles.title}`}>{items?.userName}</h3>
                                        <span className={`fs-16`}>- {items?.userPoition}</span>
                                    </div>
                                </div>
                            </SwiperSlide>
                        )
                    })}
                </Swiper>
            </div>
            {/* Remote-Work Home Section */}
            <div className={styles.findRemoteWork}>
                <div className={styles.remoteUserContent}>
                    <h3 className={`${styles.title}`}>Find Your Next Remote-Work Home</h3>
                    <p className={`fs-16`}>Join a global community of digital nomads and remote workers. Find your perfect home today!</p>
                </div>
                <div className={styles.remoteUserImages}>
                    {remoteUserImages?.map((items, i) => {
                        return (
                            <React.Fragment key={i}>
                                <Image src={items} alt="remote user" width={40} height={40} />
                            </React.Fragment>
                        )
                    })}
                </div>
            </div>
        </div>
    </>;
};

export default AuthSideCard;