// components/ImageSlider.tsx

'use client'

import Image from 'next/image'
import { ImgComparisonSlider } from '@img-comparison-slider/react'

interface ImageSliderProps {
    readonly originalImageUrl: string;
    readonly processedImageUrl: string;
}

export function ImageSlider({ originalImageUrl, processedImageUrl }: ImageSliderProps) {
    return (
        <ImgComparisonSlider hover={true} className="focus:outline-none">
            <Image
                slot="first"
                src={originalImageUrl}
                alt="Original Image"
                width={800}
                height={600}
                className="object-contain max-h-[600px]"
            />
            <Image
                slot="second"
                src={processedImageUrl}
                alt="Processed Image"
                width={800}
                height={600}
                className="object-contain max-h-[600px] w-full"
            />
        </ImgComparisonSlider>
    )
}