Swipercomponent.js

import React, { useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/effect-coverflow";
import "swiper/css/pagination";
import { EffectCoverflow, Pagination } from "swiper/modules";
import "./Swipercomponent.css"; // Ensure you create a corresponding CSS file

const avatars = [
    { name: "Rat", image: "images/rat.png", description: "Clever and resourceful. Loves puzzles and word games.", sample: "Let's solve a riddle together!" },
    { name: "Ox", image: "images/ox.png", description: "Strong and dependable. Very patient when explaining concepts.", sample: "I will guide you step by step." },
    { name: "Tiger", image: "images/tiger.png", description: "Brave and energetic. Loves exciting challenges.", sample: "Let's make learning an adventure!" },
    { name: "Rabbit", image: "images/rabbit.png", description: "Gentle and kind. Encourages learning through storytelling.", sample: "I have a story to share with you!" },
    { name: "Dragon", image: "images/dragon.png", description: "Confident and intelligent. Explains ideas clearly.", sample: "I will help you think like a scholar!" },
    { name: "Snake", image: "images/snake.png", description: "Calm and analytical. Gives insightful explanations.", sample: "Let's break this down logically!" },
    { name: "Horse", image: "images/horse.png", description: "Cheerful and enthusiastic. Encourages active participation.", sample: "Come on, let's say it together!" },
    { name: "Goat", image: "images/sheep.png", description: "Creative and friendly. Uses fun examples.", sample: "Let's use pictures to understand this!" },
    { name: "Monkey", image: "images/monkey.png", description: "Smart and playful. Makes learning fun.", sample: "I love word games! Do you?" },
    { name: "Rooster", image: "images/rooster.png", description: "Confident and vocal. Encourages clear pronunciation.", sample: "Let's practice speaking clearly!" },
    { name: "Dog", image: "images/dog.png", description: "Loyal and encouraging. Builds confidence in learners.", sample: "You're doing a great job!" },
    { name: "Pig", image: "images/pig.png", description: "Easygoing and kind. Makes learning feel natural.", sample: "Let's take it step by step together!" }
];

function SwiperComponent({ onSelectAvatar }) {
    const [selected, setSelected] = useState(avatars[0]); // Default to the first avatar

    const handleSelect = (avatar) => {
        setSelected(avatar);
        onSelectAvatar(avatar);
    };

    return (
        <div className="swiper-container">
            <Swiper
                effect={"coverflow"}
                grabCursor={true}
                centeredSlides={true}
                slidesPerView={"auto"}
                coverflowEffect={{
                    rotate: 0,
                    stretch: 0,
                    depth: 100,
                    modifier: 2.5,
                    slideShadows: false,
                }}
                pagination={true}
                modules={[EffectCoverflow, Pagination]}
                className="swiper"
            >
                {avatars.map((avatar, index) => (
                    <SwiperSlide key={index} onClick={() => handleSelect(avatar)}>
                        <img src={avatar.image} alt={avatar.name} className="avatar-image" />
                        <div className="avatar-info">
                            <h3>{avatar.name}</h3>
                            <p>{avatar.description}</p>
                            <em>"{avatar.sample}"</em>
                        </div>
                    </SwiperSlide>
                ))}
            </Swiper>
        </div>
    );
}

export default SwiperComponent;