'use client'

import {useState} from "react";
import {ACCOUNT_SLIDER_ELEMENTS} from "./accountCarouselConfig";
import Image from "next/image";
import {Container} from "@/shared/components/Container/Container";
import styles from './AccountSection.module.css';
import {Modal} from "@/shared/components/Modal/Modal";
import {Carousel} from "@/shared/components/Carousel/Carousel";

export function AccountSection() {
    const [selectedImageIndex, setSelectedImageIndex] = useState<number | null>(null);

    const handleImageClick = (imageIndex: number) => {
        setSelectedImageIndex(imageIndex);
    }

    return (
        <section className={styles.root}>
            <h3 className={styles.accountTitle}>Личный кабинет для управления заказами</h3>
            <Container>
                <div className={styles.accountSection}>
                    <div className={styles.carousel}>
                        <Carousel>
                            {ACCOUNT_SLIDER_ELEMENTS.map((element, index) => (
                                <figure key={index}>
                                    <Image
                                        className={styles.image}
                                        src={element.src}
                                        alt={element.alt}
                                        onClick={() => handleImageClick(index)}
                                        sizes={'100vw'}
                                    />
                                    <figcaption className={styles.figcaption}>{element.label}</figcaption>
                                </figure>
                            ))}
                        </Carousel>
                        {selectedImageIndex !== null && (
                            <Modal onClose={() => setSelectedImageIndex(null)}>
                                <Image
                                    className={styles.imageOpen}
                                    src={ACCOUNT_SLIDER_ELEMENTS[selectedImageIndex].src}
                                    alt={ACCOUNT_SLIDER_ELEMENTS[selectedImageIndex].alt}
                                    sizes={'100vw'}
                                />
                            </Modal>
                        )}
                    </div>
                </div>
            </Container>
        </section>
    );
}
