import {ProductResource} from '@prisma/client'
import Image from 'next/image'
import React from 'react'

import {Button} from '@/ui/button'
import {DialogTrigger} from '@/ui/dialog'

type PropType = {
	selected: boolean
	index: number
	onClick: () => void
	image: ProductResource
}

export const Thumb: React.FC<PropType> = props => {
	const {selected, index, onClick, image} = props

	return (
		<div
			className={'embla-thumbs__slide'.concat(
				selected ? 'embla-thumbs__slide--selected' : ''
			)}
		>
			<DialogTrigger asChild>
				<button
					onClick={onClick}
					type='button'
					className='embla-thumbs__slide__number'
				>
					<Image
						src={image.uri.replace('.jpg', '-thumb.jpg')}
						alt=''
						width={96}
						height={96}
						className='rounded-md border'
						style={{
							width: '96px',
							height: '96px',
							objectFit: 'cover'
						}}
					/>
				</button>
			</DialogTrigger>
		</div>
	)
}