"use client";
import React from "react";
import PaginationWithText from "@/components/ui/pagination/PaginationWithText";
import PaginationWithTextWithIcon from "@/components/ui/pagination/PaginationWithTextWitIcon";
import PaginationWithIcon from "@/components/ui/pagination/PaginationWitIcon";
import ComponentCard from "@/components/common/ComponentCard";

export default function PaginationExample() {
  const handlePageChange = (page: number) => {
    // Here you would typically fetch data for the new page
  };
  return (
    <div className="space-y-5 sm:space-y-6">
      <ComponentCard title="Pagination with Text">
        <PaginationWithText
          totalPages={10}
          initialPage={1}
          onPageChange={handlePageChange}
        />
      </ComponentCard>
      <ComponentCard title="Pagination with Text and Icon">
        <PaginationWithTextWithIcon
          totalPages={10}
          initialPage={1}
          onPageChange={handlePageChange}
        />
      </ComponentCard>
      <ComponentCard title="Pagination with  Icon">
        <PaginationWithIcon
          totalPages={10}
          initialPage={1}
          onPageChange={handlePageChange}
        />
      </ComponentCard>
    </div>
  );
}