// @ts-nocheck
import React from "react"
import Container from "../shared/container"
import Image from "next/image"
import myImage from "@/public/card.png"
import MainLink from "../shared/main-link"
import { getHomeDeveloperData } from "@/lib/serverActions"
import { Swiper, SwiperSlide } from "swiper/react"
import DeveloperSlider from "./DeveloperSlider"
import { Icon } from "@iconify/react"

async function DeveloperSection({
    title,
    description,
    btnText,
    btnLink,
    reverse,
    locale,
}: {
    title: string
    description: string
    image: any
    btnText: string
    btnLink: string
    reverse?: boolean
    locale: string
}) {
    const data = await getHomeDeveloperData(locale)

    return (
        <section
            className="bg-[#071011] text-white py-10 px-5 lg:px-0 "
            data-aos="fade-up"
            data-aos-delay={100}
            data-aos-duration="800"
        >
            <Container className="overflow-hidden">
                <div className="flex justify-between items-center mb-5">
                    <h2 className="text-[32px]">{data?.data?.header?.title}</h2>
                    <MainLink
                        className="flex items-center group hover:!text-primary duration-300 gap-3 text-[16px] lg:text-2xl !text-white"
                        locale={locale}
                        href={btnLink}
                    >
                        {btnText}
                        <Icon
                            className="text-2xl group-hover:text-primary duration-300 text-white"
                            icon="mynaui:arrow-right"
                        />
                    </MainLink>
                </div>
                <p className="text-muted-foreground  mb-10 font-light text-xl">{data?.data?.header?.description}</p>

                <div className="ml-5 mt-10 mr-10">
                    <DeveloperSlider
                        data={[...data?.data?.data.slice(0, data?.data?.data.length / 2)]}
                        reverse={reverse}
                        locale={locale}
                        delay={1}
                        speed={100}
                    />
                </div>

                <div className="ml-10">
                    <div className="ml-5 mt-10">
                        <DeveloperSlider
                            data={[...data?.data?.data.slice(data?.data?.data.length / 2)]}
                            reverse={reverse}
                            locale={locale}
                            delay={1}
                            speed={100}
                        />
                    </div>
                </div>
            </Container>
        </section>
    )
}

export default DeveloperSection