import { useState } from "react";
import ComponentCard from "../../../components/common/ComponentCard";
import PageMeta from "../../../components/common/PageMeta";
import { Pagination } from "../../../components/ui/pagination/Pagination";

export default function PaginationPage() {
  const [page1, setPage1] = useState(1);
  const [page2, setPage2] = useState(1);
  const [page3, setPage3] = useState(1);

  return (
    <>
      <PageMeta
        title="React.js Pagination Dashboard | TailAdmin - React.js Admin Dashboard Template"
        description="This is React.js Pagination Dashboard page for TailAdmin - React.js Tailwind CSS Admin Dashboard Template"
      />
      <div className="space-y-5 sm:space-y-6">
        <ComponentCard title="Pagination with Text">
          <Pagination
            currentPage={page1}
            totalPages={10}
            onPageChange={setPage1}
            variant="text"
          />
        </ComponentCard>

        <ComponentCard title="Pagination with Text and Icon">
          <Pagination
            currentPage={page2}
            totalPages={10}
            onPageChange={setPage2}
            variant="text-icon"
          />
        </ComponentCard>

        <ComponentCard title="Pagination with Icon">
          <Pagination
            currentPage={page3}
            totalPages={10}
            onPageChange={setPage3}
            variant="icon"
          />
        </ComponentCard>
      </div>
    </>
  );
}

