import {jsx,jsxs}from'react/jsx-runtime';import {useState,useEffect}from'react';import {useParams,Link}from'@remix-run/react';import {Spin}from'@admin-layout/tailwind-ui/components/Spin/index.js';import {HelpCenterHeader}from'../../components/HelpCenterHeader.js';import {cn}from'../../utils/index.js';import {getCategoryById}from'../../utils/markdownLoader.js';function CategoryLoaderSpinner() {
  return jsx("div", {
    className: "flex min-h-screen items-center justify-center bg-background text-foreground",
    role: "status",
    "aria-label": "Loading category",
    children: jsx(Spin, {
      size: "large",
      tip: "Loading categories\u2026"
    })
  });
}
const CategoryCollectionPage = () => {
  const {
    categoryId
  } = useParams();
  const [category, setCategory] = useState(undefined);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    if (!categoryId) {
      setCategory(null);
      setLoading(false);
      return;
    }
    let cancelled = false;
    setLoading(true);
    getCategoryById(categoryId).then(cat => {
      if (!cancelled) {
        setCategory(cat ?? null);
      }
    }).catch(() => {
      if (!cancelled) setCategory(null);
    }).finally(() => {
      if (!cancelled) setLoading(false);
    });
    return () => {
      cancelled = true;
    };
  }, [categoryId]);
  const handleSearch = query => {
    // Search is now handled by the dropdown in HelpCenterHeader
    // This callback is kept for compatibility
  };
  // const renderIcon = (iconType: string) => {
  //     if (iconType in HelpCenterIcons) {
  //         const IconComponent = HelpCenterIcons[iconType as keyof typeof HelpCenterIcons];
  //         return <IconComponent width={24} height={24} />;
  //     }
  //     return null;
  // };
  if (loading || category === undefined) {
    return jsx(CategoryLoaderSpinner, {});
  }
  if (!category) {
    return jsx("div", {
      className: "min-h-screen bg-background text-foreground",
      children: jsxs("div", {
        className: "container mx-auto px-16 py-16",
        children: [jsx("h1", {
          className: "text-2xl font-bold",
          children: "Category not found"
        }), jsx(Link, {
          to: "/help",
          className: "mt-4 text-primary hover:text-primary/80",
          children: "\u2190 Back to Help Center"
        })]
      })
    });
  }
  return jsxs("div", {
    className: "min-h-screen bg-background text-foreground",
    children: [jsx("div", {
      className: "relative overflow-hidden",
      children: jsx(HelpCenterHeader, {
        onSearch: handleSearch
      })
    }), jsx("div", {
      className: "container mx-auto px-16 pt-8",
      children: jsxs("nav", {
        className: "flex items-center space-x-2 text-sm text-muted-foreground",
        children: [jsx(Link, {
          to: "/help",
          className: "hover:text-foreground",
          children: "All Collections"
        }), jsx("span", {
          children: "\u203A"
        }), jsx("span", {
          className: "text-foreground",
          children: category.title
        })]
      })
    }), jsxs("main", {
      className: "container mx-auto px-16 py-8",
      children: [jsx("div", {
        className: "mb-8",
        children: jsx("div", {
          className: "flex items-start space-x-4",
          children: jsxs("div", {
            children: [jsx("h1", {
              className: "text-4xl font-bold text-foreground mb-2",
              children: category.title
            }), jsx("p", {
              className: "text-lg text-muted-foreground mb-4",
              children: category.description
            }), jsx("div", {
              className: "flex items-center space-x-4 text-sm text-muted-foreground",
              children: jsxs("div", {
                className: "flex items-center",
                children: [jsx("div", {
                  className: "mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-muted text-xs text-foreground",
                  children: "J"
                }), jsxs("span", {
                  children: ["By Beena \u2022 ", category.articles.length, " articles"]
                })]
              })
            })]
          })
        })
      }), jsx("div", {
        className: "space-y-4",
        children: category.articles.map(article => jsxs(Link, {
          to: `/help/${categoryId}/${article.slug}`,
          className: cn('group flex cursor-pointer items-center justify-between rounded-lg border border-border bg-card p-6 transition-all hover:border-primary/50 hover:bg-primary/5'),
          children: [jsxs("div", {
            className: "flex-1",
            children: [jsx("h3", {
              className: "text-lg font-medium text-foreground group-hover:text-primary transition-colors",
              children: article.title
            }), jsx("p", {
              className: "mt-1 text-sm text-muted-foreground",
              children: article.description
            })]
          }), jsx("div", {
            className: "ml-4 text-muted-foreground group-hover:text-primary transition-colors",
            children: jsx("svg", {
              className: "h-5 w-5",
              fill: "none",
              viewBox: "0 0 24 24",
              stroke: "currentColor",
              children: jsx("path", {
                strokeLinecap: "round",
                strokeLinejoin: "round",
                strokeWidth: 2,
                d: "M9 5l7 7-7 7"
              })
            })
          })]
        }, article.id))
      })]
    })]
  });
};export{CategoryCollectionPage as default};//# sourceMappingURL=index.js.map
