"use client";
'use strict';

var clsx = require('clsx');
var tailwindMerge = require('tailwind-merge');
var jsxRuntime = require('react/jsx-runtime');

// lib/utils.ts
function cn(...inputs) {
  return tailwindMerge.twMerge(clsx.clsx(inputs));
}
var defaultItems = [
  {
    question: "What is a FAQ?",
    answer: "A FAQ is a list of frequently asked questions and answers on a particular topic."
  },
  {
    question: "What is the purpose of a FAQ?",
    answer: "The purpose of a FAQ is to provide answers to common questions and help users find the information they need quickly and easily."
  },
  {
    question: "How do I create a FAQ?",
    answer: "To create a FAQ, you need to compile a list of common questions and answers on a particular topic and organize them in a clear and easy-to-navigate format."
  },
  {
    question: "What are the benefits of a FAQ?",
    answer: "The benefits of a FAQ include providing quick and easy access to information, reducing the number of support requests, and improving the overall user experience."
  },
  {
    question: "How should I organize my FAQ?",
    answer: "You should organize your FAQ in a logical manner, grouping related questions together and ordering them from most basic to more advanced topics."
  },
  {
    question: "How long should FAQ answers be?",
    answer: "FAQ answers should be concise and to the point, typically a few sentences or a short paragraph is sufficient for most questions."
  }
];
function FaqNumberedGrid({
  heading = "Frequently asked questions",
  description = "Find answers to common questions about our products. Can't find what you're looking for? Contact our support team.",
  items = defaultItems,
  className
}) {
  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container", children: [
    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex max-w-3xl flex-col text-left md:text-center", children: [
      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "mb-3 text-3xl font-semibold md:mb-4 lg:mb-6 lg:text-4xl", children: heading }),
      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground lg:text-lg", children: description })
    ] }),
    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mt-10 grid max-w-7xl gap-6 md:grid-cols-2", children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
      "div",
      {
        className: "flex gap-4 rounded-lg border p-4 md:p-5",
        children: [
          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-secondary flex size-6 shrink-0 items-center justify-center rounded-sm text-xs font-medium", children: index + 1 }),
          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 flex items-center justify-between", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-medium", children: item.question }) }),
            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm", children: item.answer })
          ] })
        ]
      },
      index
    )) })
  ] }) });
}

exports.FaqNumberedGrid = FaqNumberedGrid;
//# sourceMappingURL=faq-numbered-grid.cjs.map
//# sourceMappingURL=faq-numbered-grid.cjs.map