const imgLine98Stroke = "https://www.figma.com/api/mcp/asset/76fc20a1-3532-4d66-94d4-364035c7922c";
const imgLine69Stroke = "https://www.figma.com/api/mcp/asset/1826ccfe-e436-415e-8da1-ec57fd870055";
const imgLine69Stroke1 = "https://www.figma.com/api/mcp/asset/8173b43b-9cec-42bb-b140-99adc58630cd";

type PaginationProps = {
  className?: string;
  children?: React.ReactNode | null;
  showPageSize?: boolean;
  showTotal?: boolean;
  type?: "Classic" | "Simple" | "Small";
};

export default function Pagination({ className, children = null, showPageSize = true, showTotal = true, type = "Classic" }: PaginationProps) {
  const isSimple = type === "Simple";
  const isSmall = type === "Small";
  return (
    <div className={className || "content-stretch flex gap-[var(--spacing\\/l,24px)] items-center justify-center relative rounded-[4px]"} id={isSimple ? "node-4894_7211" : isSmall ? "node-4907_6738" : "node-4884_7181"}>
      {showTotal && (
        <div className="flex flex-col font-['Roboto:Regular',sans-serif] font-normal justify-center leading-[0] relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/tips,#9e9e9e)] text-center whitespace-nowrap" data-node-id="4884:7203" style={{ fontVariationSettings: "'wdth' 100" }}>
          <p className="leading-[1.5]">1-20 of 1,299</p>
        </div>
      )}
      {["Classic", "Simple"].includes(type) && showPageSize && (
        <div className="bg-[var(--ux\/grey\/grey-10-\#353535,#353535)] content-stretch flex gap-[8px] h-[32px] items-center px-[12px] py-[8px] relative rounded-[4px] shrink-0 w-[120px]" data-node-id="4884:7205" data-name="select box/filled">
          <p className="flex-[1_0_0] font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] min-w-px relative text-[14px] text-[color:var(--ux\/grey\/grey-2-\#f8f8f8,#f8f8f8)]" data-node-id="I4884:7205;1436:32898" style={{ fontVariationSettings: "'wdth' 100" }}>
            20/Page
          </p>
          <div className="relative shrink-0 size-[16px]" data-node-id="I4884:7205;1436:33905" data-name="icon/Arrow/Dropdown">
            <div className="absolute inset-[37.5%_18.13%_30.02%_18.12%]" data-node-id="I4884:7205;1436:33905;2107:20124" data-name="Line 98 (Stroke)">
              <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgLine98Stroke} />
            </div>
          </div>
        </div>
      )}
      {type === "Classic" && (
        <div className="content-stretch flex gap-[var(--spacing\/l,24px)] items-center relative shrink-0" data-node-id="4884:7201" data-name="Content">
          {children || (
            <>
              <div className="content-stretch flex gap-[8px] items-center relative shrink-0" data-node-id="4907:6724">
                <div className="bg-[var(--color-type\/background\/layer_4,#353535)] content-stretch flex items-center justify-center overflow-clip relative rounded-[4px] shrink-0 size-[32px]" data-node-id="4884:7182" data-name="Btn/Previous">
                  <div className="relative shrink-0 size-[16px]" data-node-id="4884:7183" data-name="icon/Arrow/Previous">
                    <div className="absolute flex inset-[12.49%_34.49%_12.5%_25.03%] items-center justify-center" style={{ containerType: "size" }}>
                      <div className="flex-none h-[100cqw] rotate-90 w-[100cqh]">
                        <div className="relative size-full" data-node-id="I4884:7183;1544:3932" data-name="Line 69 (Stroke)">
                          <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgLine69Stroke} />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="bg-[var(--ux\/brand\/brand,#2fb54e)] content-stretch flex items-center justify-center overflow-clip relative rounded-[4px] shrink-0 size-[32px]" data-node-id="4884:7184" data-name="Page/1">
                  <div className="flex flex-col font-['Roboto:Regular',sans-serif] font-normal justify-center leading-[0] relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/heading-\&-button,white)] text-center whitespace-nowrap" data-node-id="4884:7185" style={{ fontVariationSettings: "'wdth' 100" }}>
                    <p className="leading-[1.5]">1</p>
                  </div>
                </div>
                <div className="bg-[var(--color-type\/background\/layer_4,#353535)] content-stretch flex items-center justify-center overflow-clip relative rounded-[4px] shrink-0 size-[32px]" data-node-id="4884:7186" data-name="Page/2">
                  <div className="flex flex-col font-['Roboto:Regular',sans-serif] font-normal justify-center leading-[0] relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/text_2,#ccc)] text-center whitespace-nowrap" data-node-id="4884:7187" style={{ fontVariationSettings: "'wdth' 100" }}>
                    <p className="leading-[1.5]">2</p>
                  </div>
                </div>
                <div className="bg-[var(--color-type\/background\/layer_4,#353535)] content-stretch flex items-center justify-center overflow-clip relative rounded-[4px] shrink-0 size-[32px]" data-node-id="4884:7188" data-name="Page/3">
                  <div className="flex flex-col font-['Roboto:Regular',sans-serif] font-normal justify-center leading-[0] relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/text_2,#ccc)] text-center whitespace-nowrap" data-node-id="4884:7189" style={{ fontVariationSettings: "'wdth' 100" }}>
                    <p className="leading-[1.5]">3</p>
                  </div>
                </div>
                <div className="bg-[var(--color-type\/background\/layer_4,#353535)] content-stretch flex items-center justify-center overflow-clip relative rounded-[4px] shrink-0 size-[32px]" data-node-id="4884:7190" data-name="Page/4">
                  <div className="flex flex-col font-['Roboto:Regular',sans-serif] font-normal justify-center leading-[0] relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/text_2,#ccc)] text-center whitespace-nowrap" data-node-id="4884:7191" style={{ fontVariationSettings: "'wdth' 100" }}>
                    <p className="leading-[1.5]">4</p>
                  </div>
                </div>
                <div className="bg-[var(--color-type\/background\/layer_4,#353535)] content-stretch flex items-center justify-center overflow-clip relative rounded-[4px] shrink-0 size-[32px]" data-node-id="4884:7192" data-name="Page/5">
                  <div className="flex flex-col font-['Roboto:Regular',sans-serif] font-normal justify-center leading-[0] relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/text_2,#ccc)] text-center whitespace-nowrap" data-node-id="4884:7193" style={{ fontVariationSettings: "'wdth' 100" }}>
                    <p className="leading-[1.5]">5</p>
                  </div>
                </div>
                <div className="bg-[var(--color-type\/background\/layer_4,#353535)] content-stretch flex items-center justify-center overflow-clip relative rounded-[4px] shrink-0 size-[32px]" data-node-id="4884:7194" data-name="Btn/Next">
                  <div className="relative shrink-0 size-[16px]" data-node-id="4884:7195" data-name="icon/Arrow/Next">
                    <div className="absolute flex inset-[12.51%_25.03%_12.52%_34.52%] items-center justify-center" style={{ containerType: "size" }}>
                      <div className="-rotate-90 -scale-x-100 flex-none h-[100cqw] w-[100cqh]">
                        <div className="relative size-full" data-node-id="I4884:7195;1544:5765" data-name="Line 69 (Stroke)">
                          <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgLine69Stroke1} />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="content-stretch flex gap-[var(--spacing\/xs,8px)] items-center relative shrink-0" data-node-id="4907:6725">
                <div className="flex flex-col font-['Roboto:Regular',sans-serif] font-normal justify-center leading-[0] relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/tips,#9e9e9e)] text-center whitespace-nowrap" data-node-id="4907:6726" style={{ fontVariationSettings: "'wdth' 100" }}>
                  <p className="leading-[1.5]">Go to</p>
                </div>
                <div className="bg-[var(--color-type\/line\/deep-divider,#353535)] content-stretch flex h-[32px] items-center px-[12px] py-[8px] relative rounded-[4px] shrink-0 w-[64px]" data-node-id="4907:6727" data-name="input box/filled">
                  <div className="content-stretch flex flex-[1_0_0] gap-[var(--spacing\/xs,8px)] items-center min-w-px relative" data-node-id="I4907:6727;4995:6631" data-name="Content">
                    <div className="flex flex-[1_0_0] flex-col font-['Roboto:Regular',sans-serif] font-normal justify-center leading-[0] min-w-px relative text-[14px] text-[color:var(--color-type\/text\/text_1,#f8f8f8)] text-center" data-node-id="I4907:6727;1427:47539" style={{ fontVariationSettings: "'wdth' 100" }}>
                      <p className="leading-[1.5]">1</p>
                    </div>
                  </div>
                </div>
              </div>
            </>
          )}
        </div>
      )}
      {isSmall && showPageSize && (
        <div className="border border-[var(--ux\/grey\/grey-8-\#595959,#595959)] border-solid content-stretch flex gap-[8px] h-[32px] items-center px-[12px] py-[8px] relative rounded-[4px] shrink-0 w-[120px]" data-node-id="4907:6740" data-name="select box/line">
          <p className="flex-[1_0_0] font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] min-w-px relative text-[14px] text-[color:var(--ux\/grey\/grey-2-\#f8f8f8,#f8f8f8)]" data-node-id="I4907:6740;1804:26935" style={{ fontVariationSettings: "'wdth' 100" }}>
            20/Page
          </p>
          <div className="relative shrink-0 size-[16px]" data-node-id="I4907:6740;1804:26936" data-name="icon/Arrow/Dropdown">
            <div className="absolute inset-[37.5%_18.13%_30.02%_18.12%]" data-node-id="I4907:6740;1804:26936;2107:20124" data-name="Line 98 (Stroke)">
              <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgLine98Stroke} />
            </div>
          </div>
        </div>
      )}
      {isSmall && (
        <div className="content-stretch flex gap-[var(--spacing\/l,24px)] items-center relative shrink-0" data-node-id="4907:6741" data-name="Content">
          {children || (
            <>
              <div className="content-stretch flex gap-[var(--spacing\/xxs,4px)] items-center relative shrink-0" data-node-id="4907:6742">
                <div className="content-stretch flex items-center justify-center overflow-clip relative rounded-[4px] shrink-0 size-[32px]" data-node-id="4907:6743" data-name="Btn/Previous">
                  <div className="relative shrink-0 size-[16px]" data-node-id="4907:6744" data-name="icon/Arrow/Previous">
                    <div className="absolute flex inset-[12.49%_34.49%_12.5%_25.03%] items-center justify-center" style={{ containerType: "size" }}>
                      <div className="flex-none h-[100cqw] rotate-90 w-[100cqh]">
                        <div className="relative size-full" data-node-id="I4907:6744;1544:3932" data-name="Line 69 (Stroke)">
                          <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgLine69Stroke} />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="content-stretch flex items-center justify-center overflow-clip relative rounded-[4px] shrink-0 size-[32px]" data-node-id="4907:6745" data-name="Page/1">
                  <div className="flex flex-col font-['Roboto:Regular',sans-serif] font-normal justify-center leading-[0] relative shrink-0 text-[14px] text-[color:var(--ux\/brand\/brand,#2fb54e)] text-center whitespace-nowrap" data-node-id="4907:6746" style={{ fontVariationSettings: "'wdth' 100" }}>
                    <p className="leading-[1.5]">1</p>
                  </div>
                </div>
                <div className="content-stretch flex items-center justify-center overflow-clip relative rounded-[4px] shrink-0 size-[32px]" data-node-id="4907:6747" data-name="Page/2">
                  <div className="flex flex-col font-['Roboto:Regular',sans-serif] font-normal justify-center leading-[0] relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/text_2,#ccc)] text-center whitespace-nowrap" data-node-id="4907:6748" style={{ fontVariationSettings: "'wdth' 100" }}>
                    <p className="leading-[1.5]">2</p>
                  </div>
                </div>
                <div className="content-stretch flex items-center justify-center overflow-clip relative rounded-[4px] shrink-0 size-[32px]" data-node-id="4907:6749" data-name="Page/3">
                  <div className="flex flex-col font-['Roboto:Regular',sans-serif] font-normal justify-center leading-[0] relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/text_2,#ccc)] text-center whitespace-nowrap" data-node-id="4907:6750" style={{ fontVariationSettings: "'wdth' 100" }}>
                    <p className="leading-[1.5]">3</p>
                  </div>
                </div>
                <div className="content-stretch flex items-center justify-center overflow-clip relative rounded-[4px] shrink-0 size-[32px]" data-node-id="4907:6751" data-name="Page/4">
                  <div className="flex flex-col font-['Roboto:Regular',sans-serif] font-normal justify-center leading-[0] relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/text_2,#ccc)] text-center whitespace-nowrap" data-node-id="4907:6752" style={{ fontVariationSettings: "'wdth' 100" }}>
                    <p className="leading-[1.5]">4</p>
                  </div>
                </div>
                <div className="content-stretch flex items-center justify-center overflow-clip relative rounded-[4px] shrink-0 size-[32px]" data-node-id="4907:6753" data-name="Page/5">
                  <div className="flex flex-col font-['Roboto:Regular',sans-serif] font-normal justify-center leading-[0] relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/text_2,#ccc)] text-center whitespace-nowrap" data-node-id="4907:6754" style={{ fontVariationSettings: "'wdth' 100" }}>
                    <p className="leading-[1.5]">5</p>
                  </div>
                </div>
                <div className="content-stretch flex items-center justify-center overflow-clip relative rounded-[4px] shrink-0 size-[32px]" data-node-id="4907:6755" data-name="Btn/Next">
                  <div className="relative shrink-0 size-[16px]" data-node-id="4907:6756" data-name="icon/Arrow/Next">
                    <div className="absolute flex inset-[12.51%_25.03%_12.52%_34.52%] items-center justify-center" style={{ containerType: "size" }}>
                      <div className="-rotate-90 -scale-x-100 flex-none h-[100cqw] w-[100cqh]">
                        <div className="relative size-full" data-node-id="I4907:6756;1544:5765" data-name="Line 69 (Stroke)">
                          <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgLine69Stroke1} />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="content-stretch flex gap-[var(--spacing\/xs,8px)] items-center relative shrink-0" data-node-id="4907:6757">
                <div className="flex flex-col font-['Roboto:Regular',sans-serif] font-normal justify-center leading-[0] relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/tips,#9e9e9e)] text-center whitespace-nowrap" data-node-id="4907:6758" style={{ fontVariationSettings: "'wdth' 100" }}>
                  <p className="leading-[1.5]">Go to</p>
                </div>
                <div className="border border-[var(--ux\/grey\/grey-8-\#595959,#595959)] border-solid content-stretch flex h-[32px] items-center px-[12px] py-[8px] relative rounded-[4px] shrink-0 w-[64px]" data-node-id="4907:6759" data-name="input box/line">
                  <div className="flex flex-[1_0_0] flex-col font-['Roboto:Regular',sans-serif] font-normal justify-center leading-[0] min-w-px relative text-[14px] text-[color:var(--ux\/grey\/grey-2-\#f8f8f8,#f8f8f8)] text-center" data-node-id="I4907:6759;1818:8147" style={{ fontVariationSettings: "'wdth' 100" }}>
                    <p className="leading-[1.5]">1</p>
                  </div>
                </div>
              </div>
            </>
          )}
        </div>
      )}
      {isSimple && (
        <div className="content-stretch flex gap-[var(--spacing\/l,24px)] items-center relative shrink-0" data-node-id="4894:7213" data-name="Content">
          {children || (
            <>
              <div className="content-stretch flex items-center justify-between relative shrink-0 w-[80px]" data-node-id="4907:6731">
                <div className="bg-[var(--color-type\/background\/layer_4,#353535)] content-stretch flex items-center justify-center overflow-clip relative rounded-[4px] shrink-0 size-[32px]" data-node-id="4894:7214" data-name="Btn/Previous">
                  <div className="relative shrink-0 size-[16px]" data-node-id="4894:7215" data-name="icon/Arrow/Previous">
                    <div className="absolute flex inset-[12.49%_34.49%_12.5%_25.03%] items-center justify-center" style={{ containerType: "size" }}>
                      <div className="flex-none h-[100cqw] rotate-90 w-[100cqh]">
                        <div className="relative size-full" data-node-id="I4894:7215;1544:3932" data-name="Line 69 (Stroke)">
                          <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgLine69Stroke} />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="bg-[var(--color-type\/background\/layer_4,#353535)] content-stretch flex items-center justify-center overflow-clip relative rounded-[4px] shrink-0 size-[32px]" data-node-id="4894:7226" data-name="Btn/Next">
                  <div className="relative shrink-0 size-[16px]" data-node-id="4894:7227" data-name="icon/Arrow/Next">
                    <div className="absolute flex inset-[12.51%_25.03%_12.52%_34.52%] items-center justify-center" style={{ containerType: "size" }}>
                      <div className="-rotate-90 -scale-x-100 flex-none h-[100cqw] w-[100cqh]">
                        <div className="relative size-full" data-node-id="I4894:7227;1544:5765" data-name="Line 69 (Stroke)">
                          <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgLine69Stroke1} />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="content-stretch flex gap-[var(--spacing\/xs,8px)] items-center relative shrink-0" data-node-id="4907:6732">
                <div className="flex flex-col font-['Roboto:Regular',sans-serif] font-normal justify-center leading-[0] relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/tips,#9e9e9e)] text-center whitespace-nowrap" data-node-id="4907:6733" style={{ fontVariationSettings: "'wdth' 100" }}>
                  <p className="leading-[1.5]">Go to</p>
                </div>
                <div className="bg-[var(--color-type\/line\/deep-divider,#353535)] content-stretch flex h-[32px] items-center px-[12px] py-[8px] relative rounded-[4px] shrink-0 w-[64px]" data-node-id="4907:6734" data-name="input box/filled">
                  <div className="content-stretch flex flex-[1_0_0] gap-[var(--spacing\/xs,8px)] items-center min-w-px relative" data-node-id="I4907:6734;4995:6631" data-name="Content">
                    <div className="flex flex-[1_0_0] flex-col font-['Roboto:Regular',sans-serif] font-normal justify-center leading-[0] min-w-px relative text-[14px] text-[color:var(--color-type\/text\/text_1,#f8f8f8)] text-center" data-node-id="I4907:6734;1427:47539" style={{ fontVariationSettings: "'wdth' 100" }}>
                      <p className="leading-[1.5]">1</p>
                    </div>
                  </div>
                </div>
              </div>
            </>
          )}
        </div>
      )}
    </div>
  );
}SUPER CRITICAL: The generated React+Tailwind code MUST be converted to match the target project's technology stack and styling system.
1. Analyze the target codebase to identify: technology stack, styling approach, component patterns, and design tokens
2. Convert React syntax to the target framework/library
3. Transform all Tailwind classes to the target styling system while preserving exact visual design
4. Follow the project's existing patterns and conventions
DO NOT install any Tailwind as a dependency unless the user instructs you to do so.
Node ids have been added to the code as data attributes, e.g. `data-node-id="1:2"`.These styles are contained in the design: Roboto/14 body: Font(family: "Roboto", style: Regular, size: 14, weight: 400, lineHeight: 1.5, letterSpacing: 0).Component descriptions: The following components have usage descriptions or documentation links defined in Figma. These descriptions provide important context about the intended usage, best practices, and any constraints for each component. Follow these guidelines when implementing or using these components.

## Type=Classic
**Node ID:** 4884:7181

Pagination with previous, numbered pages (1-5, active=1 uses brand color), and next buttons. Uses design system text styles, colors, and icons.

## Type=Small
**Node ID:** 4907:6738

Pagination with previous, numbered pages (1-5, active=1 uses brand color), and next buttons. Uses design system text styles, colors, and icons.

## Type=Simple
**Node ID:** 4894:7211

Pagination with previous, numbered pages (1-5, active=1 uses brand color), and next buttons. Uses design system text styles, colors, and icons.Images and SVGs will be stored as constants, e.g. const image = 'https://www.figma.com/api/mcp/asset/550e8400-e29b-41d4-a716-446655440000'. These constants will be used in the code as the source for the image, ex: <img src={image} />. Image assets are stored on a remote server for 7 days and can be fetched using the provided URLs until they expire.