import { memo } from "react";
import type { FC } from "react";

import resets from "../../_resets.module.css";
import { Button_Property1SecondarybtnPr } from "../Button_Property1SecondarybtnPr/Button_Property1SecondarybtnPr";
import { IconBackStrokeIcon } from "./IconBackStrokeIcon.js";
import classes from "./unnamed10.module.css";

interface Props {
  className?: string;
  classes?: {
    root?: string;
  };
  hide?: {
    iconBasicDropdownChevronDown?: boolean;
  };
}
/* @figmaId 5415:8331 */
export const Unnamed10: FC<Props> = memo(function Unnamed10(props = {}) {
  return (
    <div
      className={`${resets.storybrainResets} ${props.classes?.root || ""} ${
        props.className || ""
      } ${classes.root}`}
    >
      <div className={classes.frame728}>
        <div className={classes._150}>
          <p className={classes.labelWrapper}>
            <span className={classes.label}>共 </span>
            <span className={classes.label2}>150</span>
            <span className={classes.label3}> 条信息，</span>
          </p>
        </div>
        <div className={classes.unnamed}>每页显示:</div>
        <Button_Property1SecondarybtnPr
          className={classes.button}
          classes={{
            iconBasicDropdownChevronDown: classes.iconBasicDropdownChevronDown,
          }}
          swap={{
            iconBackStroke: <IconBackStrokeIcon className={classes.icon} />,
          }}
          hide={{
            iconBasicDropdownChevronDown: false,
          }}
          text={{
            Label: <div className={classes.Label}>5</div>,
          }}
        />
      </div>
      <div className={classes.frame708}>
        <div className={classes.frame743}>
          <div className={classes.unnamed2}>上一页</div>
        </div>
        <div className={classes.frame745}>
          <div className={classes.rectangle288}></div>
          <div className={classes._1}>1</div>
        </div>
        <div className={classes.frame746}>
          <div className={classes.rectangle2882}></div>
          <div className={classes._2}>2</div>
        </div>
        <div className={classes.frame740}>
          <div className={classes.rectangle2883}></div>
          <div className={classes._3}>3</div>
        </div>
        <div className={classes.frame741}>
          <div className={classes.rectangle2884}></div>
          <div className={classes._4}>4</div>
        </div>
        <div className={classes.frame742}>
          <div className={classes.rectangle2885}></div>
          <div className={classes.unnamed3}>...</div>
        </div>
        <div className={classes.frame7422}>
          <div className={classes.rectangle2886}></div>
          <div className={classes._5}>5</div>
        </div>
        <div className={classes.frame744}>
          <div className={classes.unnamed4}>下一页</div>
        </div>
      </div>
    </div>
  );
});
