immich-folio/components/HeroCarousel.tsx

/**
 * HeroCarousel — crossfade between hero images on a timer.
 *
 * If only one image is provided, renders a static image with no timer.
 * When multiple images are provided, crossfades between them every 6 seconds.
 */

'use client';

import { useState, useEffect, useCallback } from 'react';
import Image from 'next/image';

interface HeroImage {
    src: string;
    blurDataURL?: string;
}

interface HeroCarouselProps {
    images: HeroImage[];
}

const INTERVAL_MS = 6000;

export function HeroCarousel({ images }: HeroCarouselProps) {
    const [currentIndex, setCurrentIndex] = useState(0);

    const advance = useCallback(() => {
        setCurrentIndex((prev) => (prev + 1) % images.length);
    }, [images.length]);

    useEffect(() => {
        if (images.length <= 1) return;

        const timer = setInterval(advance, INTERVAL_MS);
        return () => clearInterval(timer);
    }, [images.length, advance]);

    if (images.length === 0) {
        return <div className="hero__image-placeholder" />;
    }

    if (images.length === 1) {
        const img = images[0];
        return (
            <Image
                src={img.src}
                alt=""
                className="hero__image"
                fill
                sizes="50vw"
                priority
                {...(img.blurDataURL
                    ? { placeholder: 'blur' as const, blurDataURL: img.blurDataURL }
                    : {})}
            />
        );
    }

    return (
        <>
            {images.map((img, i) => (
                <Image
                    key={i}
                    src={img.src}
                    alt=""
                    className={`hero__carousel-image${i === currentIndex ? ' hero__carousel-image--active' : ''}`}
                    fill
                    sizes="50vw"
                    priority={i === 0}
                    {...(img.blurDataURL
                        ? { placeholder: 'blur' as const, blurDataURL: img.blurDataURL }
                        : {})}
                />
            ))}
        </>
    );
}