'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';

interface GalleryPhoto {
  id: string;
  imageDataUrl: string;
  caption: string | null;
}

interface Props {
  galleryPhotos: GalleryPhoto[];
}

export default function RandomGalleryHero({ galleryPhotos }: Props) {
  const [photos, setPhotos] = useState<GalleryPhoto[]>([]);

  useEffect(() => {
    if (galleryPhotos.length === 0) {
      setPhotos([]);
      return;
    }

    // Pick 2 random photos
    const shuffled = [...galleryPhotos].sort(() => Math.random() - 0.5);
    setPhotos(shuffled.slice(0, 2));

    // Rotate every 8 seconds
    const interval = setInterval(() => {
      const newShuffled = [...galleryPhotos].sort(() => Math.random() - 0.5);
      setPhotos(newShuffled.slice(0, 2));
    }, 8000);

    return () => clearInterval(interval);
  }, [galleryPhotos]);

  if (photos.length === 0) {
    return null;
  }

  return (
    <div className="flex gap-4">
      {photos.map((photo, idx) => (
        <div key={photo.id} className={`flex-1 transition-opacity duration-500 ${idx === 1 ? 'translate-y-6' : ''}`}>
          <div className="border-2 border-line rounded-lg overflow-hidden aspect-square">
            <img
              src={photo.imageDataUrl}
              alt={photo.caption || 'Customer design'}
              className="w-full h-full object-cover"
            />
          </div>
          {photo.caption && (
            <p className="mt-3 text-xs text-muted text-center font-medium">{photo.caption}</p>
          )}
          {!photo.caption && (
            <p className="mt-3 text-xs text-muted text-center font-medium">Customer work</p>
          )}
        </div>
      ))}
    </div>
  );
}
