import { Dialog } from '#/components/molecules/dialog.jsx';
import { FileDetails } from '#/components/molecules/file-details.jsx';

/**
 * Filtered to images, the list becomes a gallery: square thumbnails, details
 * a tap away. An unreferenced image carries a corner dot; the dialog says why.
 */
export function ImageGrid({ blobs, blobBase, recordHref, onNavigate }) {
  return (
    <div className="grid grid-cols-3 gap-2 sm:grid-cols-4 lg:grid-cols-6">
      {blobs.map((blob) => (
        <Dialog
          key={blob.cid}
          title="Image"
          trigger={
            <button
              type="button"
              className="group relative aspect-square cursor-pointer overflow-hidden rounded-xl border border-border outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
            >
              <img
                src={`${blobBase}&cid=${encodeURIComponent(blob.cid)}`}
                alt=""
                loading="lazy"
                className="size-full object-cover transition-transform duration-200 group-hover:scale-[1.04]"
              />
              {!blob.records.length && (
                <span
                  title="Not used by any record"
                  className="absolute top-1.5 right-1.5 size-2.5 rounded-full bg-warning ring-2 ring-card"
                />
              )}
            </button>
          }
        >
          <FileDetails
            blob={blob}
            blobBase={blobBase}
            recordHref={recordHref}
            onNavigate={onNavigate}
          />
        </Dialog>
      ))}
    </div>
  );
}