import { Button } from '@/components/ui/button';
import index from '@/routes/index/index';
import { useTranslations } from '@/utils/i18n';
import { Link } from '@inertiajs/react';
import { MoveRightIcon } from 'lucide-react';
import 'swiper/css';
import 'swiper/css/navigation';
import { Navigation } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/react';
export default function SwiperCarousel({
    item,
}: {
    item: [{ image_url: string; alt: string }];
}) {
    const { t } = useTranslations();
    return (
        <>
            <div
                className="relative mx-auto max-w-screen-2xl overflow-clip"
                id="hero_swiper"
            >
                <Swiper
                    // spaceBetween={50}
                    slidesPerView={1}
                    loop={true}
                    autoplay={{
                        delay: 1500,
                    }}
                    className="w-full"
                    navigation={true}
                    modules={[Navigation]}
                >
                    {item.map((e) => (
                        <SwiperSlide className="relative !w-full overflow-clip">
                            <img
                                src={e.image_url}
                                alt={e.alt}
                                className="mx-auto aspect-[16/6.5] h-full !w-full max-w-screen-2xl object-cover object-center max-sm:aspect-video"
                            />
                        </SwiperSlide>
                    ))}
                </Swiper>
                <div className="absolute bottom-7 left-12 z-50 flex w-md flex-col gap-6 rounded-lg bg-[#FFF5F1]/80 px-12 py-6 font-serif">
                    <div className="flex flex-col gap-1">
                        <h1 className="text-3xl font-medium max-sm:text-lg">
                            {t('pages.home.banner.title')}
                            {/* A Beautiful Home
                            Deserves A Beautiful Carpet */}
                        </h1>
                        <p className="text-xl leading-tight max-sm:text-sm">
                            {t('pages.home.banner.subTitle')}
                        </p>
                    </div>
                    <Link href={index.product().url}>
                        <Button
                            variant={'secondary'}
                            size={'lg'}
                            className="cursor-pointer border border-primary bg-transparent text-lg ring-primary"
                        >
                            {t('pages.home.banner.button')} <MoveRightIcon />
                        </Button>
                    </Link>
                </div>
            </div>
        </>
    );
}