"use client";
import Breadcrumb from "@/ui/breadcrumb";
import ServiceRegisterAuth from "@/ui/service-register-auth";

import { useTranslation } from "react-i18next";

import img1 from "@/assets/used-images/platform1.png";
import img2 from "@/assets/used-images/plateform2.png";
import img3 from "@/assets/used-images/plateform3.png";
import img4 from "@/assets/used-images/plateform4.png";
import img5 from "@/assets/used-images/plateform9.png";
import img6 from "@/assets/used-images/plateform6.png";
import img7 from "@/assets/used-images/plateform7.png";
import img8 from "@/assets/used-images/plateform8.png";
import img9 from "@/assets/used-images/plateform10.png";


const TrainingCard = ({ title, description, image }) => {
    return (
        <div className="bg-white rounded-2xl text-center overflow-hidden relative border">
            <div className="relative w-full h-[200px] overflow-hidden">
                <img
                    src={image}
                    alt={title}
                    className="w-full h-full object-cover relative"
                />
                <div className="bg-light-red absolute w-full h-full top-0" />
                <h3 className="absolute text-xl font-bold m-0 text-white top-20 left-1/2 transform -translate-x-1/2">{title}
                </h3>
            </div>
            <div className="!p-4 text-center text-common-text">
                <p className="m-0">{description}</p>
            </div>
        </div>
    );
};

const Platforms = () => {
    const { t } = useTranslation();
    const cards = t('platforms.cards', { returnObjects: true }) as any[];
    const imgs = [img1, img2, img3, img4, img5, img6, img7, img8, img9];
    return (
        <>
            <Breadcrumb pages={[t('routes.services'), t('routes.platforms')]} />
            <div className="layout">
                <div>
                    <div className="border rounded-lg my-10">
                        <div>
                            <div className="flex justify-center w-full">
                                <h2 className="bg-primary-tw text-white py-2 px-5 text-center rounded-lg text-xl relative top-[-25px]">
                                    {t('routes.platforms')}
                                </h2>
                            </div>
                            <p className="mb-4 text-semi-gray px-4 text-center">
                                {t('platforms.desc')}
                            </p>
                        </div>
                    </div>

                    <div className="grid lg:grid-cols-2 xl:grid-cols-3 !gap-8">
                        {cards.map((card, i: number) => (
                            <TrainingCard key={i} title={card?.tip} description={card?.text} image={imgs[i]} />
                        ))}
                    </div>

                    <ServiceRegisterAuth serviceId={4} serviceName={t('routes.platforms')} />
                </div>
            </div>
        </>
    );
};

export default Platforms;