goodgo-platform/apps/web/components/listings/image-gallery.tsx

'use client';

import Image from 'next/image';
import * as React from 'react';
import type { PropertyMedia } from '@/lib/listings-api';
import { cn } from '@/lib/utils';

interface ImageGalleryProps {
  media: PropertyMedia[];
  className?: string;
}

export function ImageGallery({ media, className }: ImageGalleryProps) {
  const images = media.filter((m) => m.type === 'image').sort((a, b) => a.order - b.order);
  const [selectedIndex, setSelectedIndex] = React.useState(0);

  if (images.length === 0) {
    return (
      <div
        className={cn(
          'flex aspect-video items-center justify-center rounded-lg bg-muted text-muted-foreground',
          className,
        )}
      >
        Chưa có hình ảnh
      </div>
    );
  }

  return (
    <div className={cn('space-y-3', className)}>
      {/* Main image */}
      <div className="relative aspect-video overflow-hidden rounded-lg bg-muted">
        <Image
          src={images[selectedIndex]?.url ?? ''}
          alt={images[selectedIndex]?.caption || `Ảnh ${selectedIndex + 1}`}
          fill
          sizes="(max-width: 768px) 100vw, 60vw"
          className="object-cover"
          priority={selectedIndex === 0}
        />
        {images.length > 1 && (
          <>
            <button
              onClick={() => setSelectedIndex((i) => (i > 0 ? i - 1 : images.length - 1))}
              className="absolute left-2 top-1/2 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70"
              aria-label="Ảnh trước"
            >
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6"/></svg>
            </button>
            <button
              onClick={() => setSelectedIndex((i) => (i < images.length - 1 ? i + 1 : 0))}
              className="absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70"
              aria-label="Ảnh tiếp"
            >
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6"/></svg>
            </button>
          </>
        )}
        <div className="absolute bottom-2 right-2 rounded bg-black/60 px-2 py-1 text-xs text-white">
          {selectedIndex + 1} / {images.length}
        </div>
      </div>

      {/* Thumbnails */}
      {images.length > 1 && (
        <div className="flex gap-2 overflow-x-auto pb-1">
          {images.map((img, index) => (
            <button
              key={img.id}
              onClick={() => setSelectedIndex(index)}
              className={cn(
                'relative h-16 w-16 flex-shrink-0 overflow-hidden rounded-md border-2 transition-colors',
                index === selectedIndex ? 'border-primary' : 'border-transparent opacity-70 hover:opacity-100',
              )}
            >
              <Image
                src={img.url}
                alt={img.caption || `Thumbnail ${index + 1}`}
                fill
                sizes="64px"
                className="object-cover"
              />
            </button>
          ))}
        </div>
      )}
    </div>
  );
}