'use client'

import Image from 'next/image'
import { useState } from 'react'
import type { GalleryItem } from '@/lib/data'
import Lightbox from './Lightbox'

/**
 * Masonry képrács CSS oszlopokkal.
 * Minden kép a saját méretarányában jelenik meg — nincs `object-fit: cover`,
 * tehát semmi nem esik ki a kivágásból. A hover az egész csempét emeli,
 * nem a képet nagyítja egy fix keretben.
 */
export default function Gallery({
  items,
  basePath = '/images/pictures',
}: {
  items: GalleryItem[]
  basePath?: string
}) {
  const [index, setIndex] = useState<number | null>(null)

  return (
    <>
      <div className="gallery-masonry">
        {items.map((item, i) => (
          <button
            key={item.id}
            type="button"
            className="gallery-item"
            onClick={() => setIndex(i)}
            aria-label={item.title ?? `Esküvői fotó ${i + 1} megnyitása`}
          >
            <Image
              src={`${basePath}/${item.picture}`}
              alt={item.title ?? `Esküvői fotó ${i + 1}`}
              width={item.w}
              height={item.h}
              sizes="(max-width: 576px) 100vw, (max-width: 992px) 50vw, 33vw"
              loading={i < 4 ? 'eager' : 'lazy'}
              priority={i < 4}
            />
            <span className="zoom-badge" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2">
                <circle cx="11" cy="11" r="7" />
                <path d="M20 20l-3.5-3.5M11 8v6M8 11h6" strokeLinecap="round" />
              </svg>
            </span>
          </button>
        ))}
      </div>

      {index !== null && (
        <Lightbox
          items={items}
          index={index}
          basePath={basePath}
          onClose={() => setIndex(null)}
          onIndexChange={(update) => setIndex((prev) => (prev === null ? prev : update(prev)))}
        />
      )}
    </>
  )
}