import { jsxs as i, jsx as r } from "react/jsx-runtime";
import { useState as m } from "react";
import s from "../../Button/index.js";
import l from "../index.js";
import p from "./FirstComponent.js";
import c from "./SecondComponent.js";
import u from "./ThirdComponent.js";
import d from "./FourthComponent.js";
import f from "./FifthComponent.js";
import "./index.css";
function y() {
  const [e, a] = m(0), n = [];
  for (let o = 0; o < 5; o++)
    n.push(
      /* @__PURE__ */ r(
        s,
        {
          variant: o === e ? "contained" : "outlined",
          size: "small",
          onClick: () => a(o),
          color: o === e ? "primary" : "secondary",
          children: o + 1
        },
        o
      )
    );
  const t = e / 4 * 100;
  return /* @__PURE__ */ i("div", { className: "demo-page-full", children: [
    /* @__PURE__ */ i(l, { onChange: (o) => a(o), customPageNumber: e, children: [
      /* @__PURE__ */ r(p, {}),
      /* @__PURE__ */ r(c, {}),
      /* @__PURE__ */ r(u, {}),
      /* @__PURE__ */ r(d, {}),
      /* @__PURE__ */ r(f, {})
    ] }),
    /* @__PURE__ */ r(
      "div",
      {
        className: "progress",
        role: "progressbar",
        "aria-valuemin": "0",
        "aria-valuemax": "100",
        "aria-valuenow": t,
        "aria-valuetext": `Page Scroller Progress: ${t}`,
        style: { width: `${t}%` }
      }
    ),
    /* @__PURE__ */ r("div", { className: "pagination-additional-class", children: n })
  ] });
}
export {
  y as default
};
