"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useMemo } from "react";
import { useTranslations } from "next-intl";
import { ImageIcon } from "lucide-react";
import { MediaCard } from "./MediaCard.js";
import { Skeleton } from "../ui/skeleton.js";
import { cn } from "../../lib/utils/index.js";
import { sel } from "../../lib/selectors/index.js";
function MediaGrid({
  items,
  isLoading,
  selectedIds,
  onSelect,
  onEdit,
  onDelete,
  mode = "single",
  readOnly = false,
  columns = 6,
  className
}) {
  const t = useTranslations("media");
  const gridStyle = useMemo(
    () => ({ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }),
    [columns]
  );
  if (isLoading) {
    return /* @__PURE__ */ jsx(
      "div",
      {
        "data-cy": sel("media.grid.container"),
        className: cn("grid gap-3", className),
        style: gridStyle,
        children: Array.from({ length: columns * 2 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
          /* @__PURE__ */ jsx(Skeleton, { className: "aspect-square w-full rounded-lg" }),
          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4" })
        ] }, i))
      }
    );
  }
  if (items.length === 0) {
    return /* @__PURE__ */ jsxs(
      "div",
      {
        "data-cy": sel("media.empty.container"),
        className: "flex flex-col items-center justify-center py-12 text-center",
        children: [
          /* @__PURE__ */ jsx(ImageIcon, { className: "h-16 w-16 text-muted-foreground mb-4" }),
          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: t("empty.title") }),
          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("grid.noResults") })
        ]
      }
    );
  }
  return /* @__PURE__ */ jsx(
    "div",
    {
      "data-cy": sel("media.grid.container"),
      className: cn("grid gap-3", className),
      style: gridStyle,
      children: items.map((media) => /* @__PURE__ */ jsx(
        MediaCard,
        {
          media,
          isSelected: selectedIds.has(media.id),
          onSelect,
          onEdit,
          onDelete,
          mode,
          readOnly
        },
        media.id
      ))
    }
  );
}
export {
  MediaGrid
};
