"use client";

import { useLucideIcons } from "@/hooks/useLucideIcons";
import { GalleryFilters } from "./GalleryFilters";
import { TILES, TILE_TAG } from "./galleryData";
import type { GalleryState } from "./useGalleryState";

interface GalleryMasonrySectionProps {
  state: GalleryState;
}

export function GalleryMasonrySection({ state }: GalleryMasonrySectionProps) {
  useLucideIcons();
  const { filter, setFilter, setActiveIndex, visibleTiles } = state;

  return (
    <>
      <GalleryFilters active={filter} onChange={setFilter} />
      <section className="gallery-section" id="gallery" data-screen-label="03 Gallery">
        <div className="wrap">
          <div className="gallery-head">
            <div>
              <span className="eyebrow">
                <span className="pip" />
                كل اللحظات
              </span>
              <h2>
                كل اللحظات في <em>مكان واحد.</em>
              </h2>
            </div>
            <div className="count">
              عرض <span className="n">٤٢</span> / ٤٢ صورة
            </div>
          </div>

          <div className="masonry">
            {visibleTiles.map((tile, index) => (
              <a
                key={tile.id}
                className={`gtile tile-${tile.tile} ${tile.bg}`}
                role="button"
                tabIndex={0}
                onClick={(event) => {
                  event.preventDefault();
                  setActiveIndex(index);
                }}
                onKeyDown={(event) => {
                  if (event.key === "Enter" || event.key === " ") {
                    event.preventDefault();
                    setActiveIndex(index);
                  }
                }}
              >
                <div className="g-bg" />
                <span className="g-tag">{TILE_TAG[tile.category]}</span>
                <div className="g-zoom">
                  <i data-lucide="maximize-2" />
                </div>
                <div className="g-content">
                  <div className="cat">{tile.caption}</div>
                  <h4>{tile.title}</h4>
                </div>
              </a>
            ))}
          </div>

          <div className={`empty-state${visibleTiles.length === 0 ? " show" : ""}`}>
            <div className="ic">
              <i data-lucide="image-off" />
            </div>
            <h3>لا توجد صور في هذه الفئة</h3>
            <p>جرّب فئة أخرى من الفلاتر أعلاه.</p>
          </div>
        </div>
      </section>
    </>
  );
}

// Re-export so page can `import { TILES } from "@/sections/gallery/GalleryMasonrySection"` if desired.
export { TILES };