'use client'

import { Image } from 'lucide-react'
import type { BlockPreviewProps } from './index.js'

interface GalleryImage {
  src?: string
  alt?: string
  caption?: string
}

export function GalleryPreview({ data, variant = 'grid' }: BlockPreviewProps) {
  const images = (data.images as GalleryImage[]) || []

  const placeholders: GalleryImage[] =
    images.length > 0 ? images : Array.from({ length: 6 }, (_, i) => ({ alt: `Image ${i + 1}` }))

  const Thumbnail = ({ item, className = '' }: { item: GalleryImage; className?: string }) => (
    <div
      className={`bg-muted flex items-center justify-center overflow-hidden rounded-md ${className}`}
    >
      {item.src ? (
        <img src={item.src} alt={item.alt || ''} className="h-full w-full object-cover" />
      ) : (
        <Image size={20} className="text-muted-foreground" />
      )}
    </div>
  )

  if (variant === 'masonry') {
    return (
      <div className="border-border rounded-md border p-4">
        <div className="columns-3 gap-3 space-y-3">
          {placeholders.map((item, i) => (
            <Thumbnail
              key={i}
              item={item}
              className={
                i % 3 === 0 ? 'aspect-square' : i % 3 === 1 ? 'aspect-[3/4]' : 'aspect-[4/3]'
              }
            />
          ))}
        </div>
      </div>
    )
  }

  if (variant === 'carousel') {
    return (
      <div className="border-border overflow-hidden rounded-md border p-4">
        <div className="flex gap-3 overflow-hidden">
          {placeholders.slice(0, 4).map((item, i) => (
            <Thumbnail key={i} item={item} className="aspect-square min-w-[120px] flex-1" />
          ))}
          {placeholders.length > 4 && (
            <div className="bg-muted flex min-w-[120px] flex-1 items-center justify-center rounded-md">
              <span className="text-muted-foreground text-sm">+{placeholders.length - 4}</span>
            </div>
          )}
        </div>
      </div>
    )
  }

  if (variant === 'lightbox') {
    return (
      <div className="border-border rounded-md border p-4">
        <div className="grid grid-cols-3 gap-3">
          {placeholders.map((item, i) => (
            <Thumbnail key={i} item={item} className="aspect-square" />
          ))}
        </div>
        <p className="text-muted-foreground mt-2 text-center text-xs">Click to open lightbox</p>
      </div>
    )
  }

  return (
    <div className="border-border rounded-md border p-4">
      <div className="grid grid-cols-3 gap-3">
        {placeholders.map((item, i) => (
          <Thumbnail key={i} item={item} className="aspect-square" />
        ))}
      </div>
    </div>
  )
}
