import { jsxs, jsx } from "react/jsx-runtime";
import * as React from "react";
import { S as Slot } from "../../index-DcJYRxi-.js";
import { cn } from "../utils/cn.js";
import { Link } from "../link/link.js";
import { Pagination } from "../pagination/pagination.js";
const LIST_ITEM_CLASSES = {
  base: "py-3 px-2",
  interactive: "block hover:bg-subtle transition-colors cursor-pointer",
  button: "w-full text-left",
  link: "w-full"
};
const List = React.forwardRef(
  ({ children, className, pageSize = 20, ...props }, ref) => {
    const [currentPage, setCurrentPage] = React.useState(1);
    const childrenArray = React.Children.toArray(children);
    const totalItems = childrenArray.length;
    const isPaginationEnabled = pageSize > 0;
    const totalPages = isPaginationEnabled ? Math.ceil(totalItems / pageSize) : 1;
    const safeCurrentPage = isPaginationEnabled && totalPages > 0 ? Math.min(currentPage, totalPages) : 1;
    const paginatedChildren = isPaginationEnabled ? childrenArray.slice(
      (safeCurrentPage - 1) * pageSize,
      safeCurrentPage * pageSize
    ) : childrenArray;
    return /* @__PURE__ */ jsxs("div", { className: "w-full space-y-4", children: [
      /* @__PURE__ */ jsx(
        "ul",
        {
          ref,
          className: cn(
            "text-base divide-y divide-[var(--border-default)]",
            className
          ),
          ...props,
          children: paginatedChildren
        }
      ),
      isPaginationEnabled && totalPages > 1 && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ jsx(
        Pagination,
        {
          currentPage: safeCurrentPage,
          totalPages,
          onPageChange: setCurrentPage
        }
      ) })
    ] });
  }
);
List.displayName = "List";
const renderInteractiveContent = ({
  href,
  onClick,
  asChild,
  children,
  className
}) => {
  const interactiveClasses = cn(
    LIST_ITEM_CLASSES.base,
    LIST_ITEM_CLASSES.interactive,
    className
  );
  if (asChild) {
    return /* @__PURE__ */ jsx(Slot, { className: interactiveClasses, children });
  }
  if (href) {
    return /* @__PURE__ */ jsx(
      Link,
      {
        href,
        className: cn(interactiveClasses, LIST_ITEM_CLASSES.link),
        children
      }
    );
  }
  if (onClick) {
    return /* @__PURE__ */ jsx(
      "button",
      {
        onClick,
        className: cn(interactiveClasses, LIST_ITEM_CLASSES.button),
        type: "button",
        children
      }
    );
  }
  return null;
};
const ListItem = React.forwardRef(
  ({ children, className, href, onClick, asChild, ...props }, ref) => {
    const isInteractive = Boolean(href || onClick || asChild);
    if (!isInteractive) {
      return /* @__PURE__ */ jsx(
        "li",
        {
          ref,
          className: cn(LIST_ITEM_CLASSES.base, className),
          ...props,
          children
        }
      );
    }
    const content = renderInteractiveContent({
      href,
      onClick,
      asChild,
      children,
      className
    });
    return /* @__PURE__ */ jsx("li", { ref, ...props, children: content });
  }
);
ListItem.displayName = "ListItem";
export {
  List,
  ListItem
};
