import { jsxs as i, jsx as r } from "react/jsx-runtime";
import { useState as s } from "react";
import m from "../../Button/index.js";
import l from "../index.js";
import c from "./FirstComponent.js";
import p from "./SecondComponent.js";
import d from "./ThirdComponent.js";
import h from "./FourthComponent.js";
import u from "./FifthComponent.js";
import "./index.css";
function F() {
  const [e, a] = s(0), n = [];
  for (let o = 0; o < 5; o++)
    n.push(
      /* @__PURE__ */ r(
        m,
        {
          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-contain", children: [
    /* @__PURE__ */ r("h3", { className: "demo-page-contain__hint", children: "You need to focus or hover page scroller to make scroll, keys or touch work" }),
    /* @__PURE__ */ i("div", { style: { width: 360, height: 640, position: "relative" }, children: [
      /* @__PURE__ */ i(l, { onChange: (o) => a(o), width: 360, height: 640, customPageNumber: e, children: [
        /* @__PURE__ */ r(c, {}),
        /* @__PURE__ */ r(p, {}),
        /* @__PURE__ */ r(d, {}),
        /* @__PURE__ */ r(h, {}),
        /* @__PURE__ */ r(u, {})
      ] }),
      /* @__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 {
  F as default
};
