'use client'

import Autoplay from 'embla-carousel-autoplay'
import Image from 'next/image'
import Link from 'next/link'
import * as React from 'react'

import {Button} from '@/components/ui/button'
import {
	Carousel,
	CarouselContent,
	CarouselItem,
	CarouselNext,
	CarouselPrevious
} from '@/components/ui/carousel'
import {cn} from '@/lib/utils'

export function HomeCarousel({
	items
}: {
	items: {
		image: string
		url: string
		title: string
		buttonCaption: string
	}[]
}) {
	const plugin = React.useRef(Autoplay({delay: 5000, stopOnInteraction: true}))

	return (
		<Carousel
			dir='ltr'
			plugins={[plugin.current]}
			className='mx-auto w-full'
			onMouseEnter={plugin.current.stop}
			onMouseLeave={plugin.current.reset}
		>
			<CarouselContent>
				{items.map(item => (
					<CarouselItem key={item.title}>
						<Link href={item.url}>
							<div className='relative -m-0.5 flex aspect-univisium items-center justify-center'>
								<Image
									src={item.image}
									alt={item.title}
									fill
									className='object-cover'
									priority
								/>
								<div className='absolute left-16 top-1/2 hidden w-1/3 -translate-y-1/2 transform md:left-32'>
									<h2
										className={cn(
											'mb-4 text-lg font-bold text-primary shadow-brand-violet drop-shadow-xl md:text-6xl'
										)}
									>
										{`${item.title}`}
									</h2>
									<Button className='hidden md:block'>
										{`${item.buttonCaption}`}
									</Button>
								</div>
							</div>
						</Link>
					</CarouselItem>
				))}
			</CarouselContent>
			{/*<CarouselPrevious className='left-0 h-[78px] w-[78px] text-6xl md:left-12' />
			<CarouselNext className='right-0 h-[78px] w-[78px] md:right-12' />*/}

			<CarouselPrevious className='absolute left-[1rem] top-1/2 z-10 h-[78px] w-[78px] -translate-y-1/2 transform' />
			<CarouselNext className='absolute right-[1rem] top-1/2 z-10 h-[78px] w-[78px] -translate-y-1/2 transform' />
		</Carousel>
	)
}