import { useRef } from "react";
import { Splide, SplideTrack, SplideSlide } from "@splidejs/react-splide";
import Section from "@/components/Section";
import Button from "@/components/Button";
import Image from "@/components/Image";
import Notification from "@/components/Notification";

import { features } from "@/mocks/features";
import Arrows from "@/components/Arrows";

type FeaturesProps = {};

const Features = ({}: FeaturesProps) => {
    const ref = useRef<any>(null);

    return (
        <Section
            className="py-10 md:pb-20 lg:pt-16 lg:pb-32 xl:pb-40 overflow-hidden"
            customPaddings
        >
            <div className="container relative z-2">
                <Splide
                    className="splide-custom splide-visible"
                    options={{
                        type: "fade",
                        rewind: true,
                        pagination: false,
                    }}
                    hasTrack={false}
                    ref={ref}
                >
                    <SplideTrack>
                        {features.map((item) => (
                            <SplideSlide key={item.id}>
                                <div className="lg:flex" key={item.id}>
                                    <div className="lg:flex lg:flex-col lg:items-start lg:max-w-[18.75rem] lg:mr-auto">
                                        <h2 className="h2 mb-6">
                                            {item.title}
                                        </h2>
                                        <p className="body-2 mb-10 text-n-3">
                                            {item.text}
                                        </p>
                                        <Button>See how it work</Button>
                                    </div>
                                    <Arrows
                                        className="my-10 lg:hidden"
                                        prevClassName="mr-3"
                                        onPrev={() => ref.current?.go("<")}
                                        onNext={() => ref.current?.go(">")}
                                    />
                                    <div className="relative h-[27.5rem] border border-n-1/20 rounded-3xl md:rounded-[2.5rem] lg:flex-1 lg:max-w-[34.625rem] lg:h-[34.5rem] lg:ml-24 xl:h-[36rem]">
                                        <div className="absolute top-[8.5rem] -left-[2rem] w-[21rem] md:w-[25.25rem] md:top-[6.4rem] md:-left-[4.5rem] lg:top-[12rem] lg:-left-[3rem] xl:top-[7.625rem] xl:-left-[4.5rem] xl:w-[32.75rem]">
                                            <Image
                                                className="w-full"
                                                src={item.imageUrl}
                                                width={512}
                                                height={512}
                                                alt="Figure"
                                            />
                                        </div>
                                        <Notification
                                            className="absolute left-4 right-4 bottom-4 bg-n-8/95 md:left-8 md:right-8 md:bottom-8"
                                            title={item.notification}
                                        />
                                        <div className="absolute top-6 right-6 flex items-center justify-center w-15 h-15 bg-n-1 rounded-full xl:top-8 xl:right-8">
                                            <Image
                                                src={item.iconUrl}
                                                width={24}
                                                height={24}
                                                alt="Icon"
                                            />
                                        </div>
                                        <div className="hidden absolute top-0 left-full ml-5 w-full h-full bg-n-8/50 border border-n-1/10 rounded-[2.5rem] md:block"></div>
                                    </div>
                                </div>
                            </SplideSlide>
                        ))}
                    </SplideTrack>
                    <Arrows
                        className="hidden -mt-12 lg:flex"
                        prevClassName="mr-3"
                        onPrev={() => ref.current?.go("<")}
                        onNext={() => ref.current?.go(">")}
                    />
                </Splide>
            </div>
        </Section>
    );
};

export default Features;