import { montserratFont } from "@/app/layout";

export const SmartSlider = ({ sliderId }: { sliderId: string }) => {
    return (
        <div className="smart-slider">
            <div className="carousel w-full">
                <a role="button" href="https://lk.jkhsakha.ru" id="item1" className="carousel-item w-full relative overflow-hidden">
                    <div className="flex justify-center items-center w-full h-full absolute bg-black/50">
                        <span className={`text-xl ${montserratFont.className} text-white`} >Личный кабинет</span>
                    </div>
                    <img
                        src="/Личный-кабинет.jpg"
                        className="w-full" />

                </a>
                <div id="item2" className="carousel-item w-full">
                    <img
                        src="/Способ-оплаты.jpg"
                        className="w-full" />
                </div>
                <div id="item3" className="carousel-item w-full">
                    <img
                        src="/first_slide2.jpg"
                        className="w-full" />
                </div>
            </div>
            <div className="flex w-full justify-center gap-2 py-2">
                <a href="#item1" className="btn btn-xs">1</a>
                <a href="#item2" className="btn btn-xs">2</a>
                <a href="#item3" className="btn btn-xs">3</a>
            </div>
        </div>
    );
};