import { jsx, Fragment, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { S as Slot } from "../../index-DcJYRxi-.js";
import { Link } from "../link/link.js";
import { c as cn } from "../../cn-FAaWYZ6x.js";
const GRID_ITEM_CLASSES = {
  base: "rounded-lg overflow-hidden",
  interactive: "block hover:bg-muted/50 transition-colors cursor-pointer rounded-lg overflow-hidden",
  button: "w-full text-left",
  link: "w-full",
  nonInteractiveHover: "hover:bg-muted/20 transition-colors"
};
const Grid = React.forwardRef(
  ({ children, cols, loading = false, skeletonCount = 6, className, ...props }, ref) => /* @__PURE__ */ jsx(
    "div",
    {
      ref,
      className: cn(
        "grid",
        "gap-2 md:gap-4",
        cols || "grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
        className
      ),
      ...props,
      children: loading ? /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: skeletonCount }, (_, i) => /* @__PURE__ */ jsx(GridSkeleton, {}, `skeleton-${i}`)) }) : children
    }
  )
);
Grid.displayName = "Grid";
const renderInteractiveContent = ({
  href,
  onClick,
  asChild,
  children,
  className
}) => {
  const interactiveClasses = cn(
    GRID_ITEM_CLASSES.base,
    GRID_ITEM_CLASSES.interactive,
    className
  );
  if (asChild) {
    return /* @__PURE__ */ jsx(Slot, { className: interactiveClasses, children });
  }
  if (href) {
    return /* @__PURE__ */ jsx(
      Link,
      {
        href,
        className: cn(interactiveClasses, GRID_ITEM_CLASSES.link),
        children
      }
    );
  }
  if (onClick) {
    return /* @__PURE__ */ jsx(
      "button",
      {
        onClick,
        className: cn(interactiveClasses, GRID_ITEM_CLASSES.button),
        type: "button",
        children
      }
    );
  }
  return null;
};
const GridItem = React.forwardRef(
  ({ children, className, href, onClick, asChild, hover = false, ...props }, ref) => {
    const isInteractive = Boolean(href || onClick || asChild);
    if (!isInteractive) {
      return /* @__PURE__ */ jsx(
        "div",
        {
          ref,
          className: cn(
            GRID_ITEM_CLASSES.base,
            hover && GRID_ITEM_CLASSES.nonInteractiveHover,
            className
          ),
          ...props,
          children
        }
      );
    }
    const content = renderInteractiveContent({
      href,
      onClick,
      asChild,
      children,
      className
    });
    return /* @__PURE__ */ jsx("div", { ref, ...props, children: content });
  }
);
GridItem.displayName = "GridItem";
const GridSkeleton = () => /* @__PURE__ */ jsxs("div", { className: "animate-pulse", children: [
  /* @__PURE__ */ jsx("div", { className: "bg-gray-200 rounded-lg h-48" }),
  /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-2", children: [
    /* @__PURE__ */ jsx("div", { className: "bg-gray-200 h-4 rounded w-3/4" }),
    /* @__PURE__ */ jsx("div", { className: "bg-gray-200 h-3 rounded w-1/2" })
  ] })
] });
export {
  Grid,
  GridItem
};
