"use client";

import React, { useState } from "react";
import { Container, Row, Col, Card } from "react-bootstrap";
import { motion } from "framer-motion";

interface AwsGpu {
  type: string;
  gpu: string;
  ram: string;
  instance: string;
  vcpus: number;
  memory: number;
  network: string;
  storage: string;
  cost: string;
}

interface OciGpu {
  family: string;
  gpu: string;
  count: number;
  ram: string;
  shape: string;
  ocpus: number;
  vcpu: number;
  memory: number;
  network: string;
  storage: string;
  gpuCost: string;
  fullCost: string;
  india: string;
}

const awsGpuData = [
  {
    type: "P5",
    gpu: "NVIDIA H100",
    ram: "80 GB HBM3",
    instance: "p5.4xlarge",
    vcpus: 16,
    memory: 256,
    network: "100 Gigabit",
    storage: "1 × 3,840 GB SSD",
    cost: "$8.256",
  },
  {
    type: "P5",
    gpu: "NVIDIA H100",
    ram: "80 GB HBM3",
    instance: "p5.48xlarge",
    vcpus: 192,
    memory: 2048,
    network: "3,200 Gigabit",
    storage: "8 × 3,840 GB SSD",
    cost: "$66.048",
  },
  {
    type: "P4D",
    gpu: "NVIDIA A100",
    ram: "40 GB HBM2e",
    instance: "p4d.24xlarge",
    vcpus: 96,
    memory: 1152,
    network: "400 Gigabit",
    storage: "8 × 1,000 GB SSD",
    cost: "$26.344",
  },
  {
    type: "P5EN",
    gpu: "NVIDIA H200",
    ram: "141 GB HBM2e",
    instance: "p5en.48xlarge",
    vcpus: 192,
    memory: 2048,
    network: "3200 Gigabit",
    storage: "8 × 3,840 NVMe SSD",
    cost: "$75.955",
  },

  // G5
  {
    type: "G5",
    gpu: "NVIDIA A10G",
    ram: "24 GB GDDR6X",
    instance: "g5.xlarge",
    vcpus: 4,
    memory: 16,
    network: "Up to 10 Gigabit",
    storage: "1 × 250 NVMe SSD",
    cost: "$1.208",
  },
  {
    type: "G5",
    gpu: "NVIDIA A10G",
    ram: "24 GB GDDR6X",
    instance: "g5.2xlarge",
    vcpus: 8,
    memory: 32,
    network: "Up to 10 Gigabit",
    storage: "1 × 450 NVMe SSD",
    cost: "$1.455",
  },
  {
    type: "G5",
    gpu: "NVIDIA A10G",
    ram: "24 GB GDDR6X",
    instance: "g5.4xlarge",
    vcpus: 16,
    memory: 64,
    network: "Up to 25 Gigabit",
    storage: "1 × 600 NVMe SSD",
    cost: "$1.950",
  },
  {
    type: "G5",
    gpu: "NVIDIA A10G",
    ram: "24 GB GDDR6X",
    instance: "g5.8xlarge",
    vcpus: 32,
    memory: 128,
    network: "25 Gigabit",
    storage: "1 × 900 NVMe SSD",
    cost: "$2.939",
  },
  {
    type: "G5",
    gpu: "NVIDIA A10G",
    ram: "24 GB GDDR6X",
    instance: "g5.12xlarge",
    vcpus: 48,
    memory: 192,
    network: "40 Gigabit",
    storage: "1 × 3,800 NVMe SSD",
    cost: "$6.811",
  },
  {
    type: "G5",
    gpu: "NVIDIA A10G",
    ram: "24 GB GDDR6X",
    instance: "g5.16xlarge",
    vcpus: 64,
    memory: 256,
    network: "25 Gigabit",
    storage: "1 × 1,900 NVMe SSD",
    cost: "$4.910",
  },
  {
    type: "G5",
    gpu: "NVIDIA A10G",
    ram: "24 GB GDDR6X",
    instance: "g5.24xlarge",
    vcpus: 96,
    memory: 384,
    network: "50 Gigabit",
    storage: "1 × 3,800 NVMe SSD",
    cost: "$9.779",
  },
  {
    type: "G5",
    gpu: "NVIDIA A10G",
    ram: "24 GB GDDR6X",
    instance: "g5.48xlarge",
    vcpus: 192,
    memory: 768,
    network: "100 Gigabit",
    storage: "2 × 3,800 NVMe SSD",
    cost: "$19.558",
  },

  // G6
  {
    type: "G6",
    gpu: "NVIDIA L4",
    ram: "24 GB GDDR6",
    instance: "g6.xlarge",
    vcpus: 4,
    memory: 16,
    network: "Up to 10 Gigabit",
    storage: "1 × 250 NVMe SSD",
    cost: "$0.966",
  },
  {
    type: "G6",
    gpu: "NVIDIA L4",
    ram: "24 GB GDDR6",
    instance: "g6.2xlarge",
    vcpus: 8,
    memory: 32,
    network: "Up to 10 Gigabit",
    storage: "1 × 450 NVMe SSD",
    cost: "$1.173",
  },
  {
    type: "G6",
    gpu: "NVIDIA L4",
    ram: "24 GB GDDR6",
    instance: "g6.4xlarge",
    vcpus: 16,
    memory: 64,
    network: "Up to 25 Gigabit",
    storage: "1 × 600 NVMe SSD",
    cost: "$1.588",
  },
  {
    type: "G6",
    gpu: "NVIDIA L4",
    ram: "24 GB GDDR6",
    instance: "g6.8xlarge",
    vcpus: 32,
    memory: 128,
    network: "25 Gigabit",
    storage: "2 × 450 NVMe SSD",
    cost: "$2.418",
  },
  {
    type: "G6",
    gpu: "NVIDIA L4",
    ram: "24 GB GDDR6",
    instance: "g6.12xlarge",
    vcpus: 48,
    memory: 192,
    network: "40 Gigabit",
    storage: "4 × 9,40 NVMe SSD",
    cost: "$5.525",
  },
  {
    type: "G6",
    gpu: "NVIDIA L4",
    ram: "24 GB GDDR6",
    instance: "g6.16xlarge",
    vcpus: 64,
    memory: 256,
    network: "25 Gigabit",
    storage: "2 × 940 NVMe SSD",
    cost: "$4.078",
  },
  {
    type: "G6",
    gpu: "NVIDIA L4",
    ram: "24 GB GDDR6",
    instance: "g6.24xlarge",
    vcpus: 96,
    memory: 384,
    network: "50 Gigabit",
    storage: "4 × 9,40 NVMe SSD",
    cost: "$8.015",
  },
  {
    type: "G6",
    gpu: "NVIDIA L4",
    ram: "24 GB GDDR6",
    instance: "g6.48xlarge",
    vcpus: 192,
    memory: 768,
    network: "100 Gigabit",
    storage: "8 × 940 NVMe SSD",
    cost: "$16.031",
  },

  // G4DN
 {
    type: "G4DN",
    gpu: "NVIDIA T4",
    ram: "16 GB GDDR6",
    instance: "g4dn.xlarge",
    vcpus: 4,
    memory: 16,
    network: "Up to 25 Gigabit",
    storage: "125 GB NVMe SSD",
    cost: "$0.570",
  },
  {
    type: "G4DN",
    gpu: "NVIDIA T4",
    ram: "16 GB GDDR6",
    instance: "g4dn.2xlarge",
    vcpus: 8,
    memory: 32,
    network: "Up to 25 Gigabit",
    storage: "225 GB NVMe SSD",
    cost: "$0.828",
  },
  {
    type: "G4DN",
    gpu: "NVIDIA T4",
    ram: "16 GB GDDR6",
    instance: "g4dn.4xlarge",
    vcpus: 16,
    memory: 64,
    network: "Up to 25 Gigabit",
    storage: "225 GB NVMe SSD",
    cost: "$1.325",
  },
  {
    type: "G4DN",
    gpu: "NVIDIA T4",
    ram: "16 GB GDDR6",
    instance: "g4dn.8xlarge",
    vcpus: 32,
    memory: 128,
    network: "50 Gigabit",
    storage: "900 GB NVMe SSD",
    cost: "$2.395",
  },
  {
    type: "G4DN",
    gpu: "NVIDIA T4",
    ram: "16 GB GDDR6",
    instance: "g4dn.12xlarge",
    vcpus: 48,
    memory: 192,
    network: "50 Gigabit",
    storage: "900 GB NVMe SSD",
    cost: "$4.306",
  },
  {
    type: "G4DN",
    gpu: "NVIDIA T4",
    ram: "16 GB GDDR6",
    instance: "g4dn.16xlarge",
    vcpus: 64,
    memory: 256,
    network: "50 Gigabit",
    storage: "900 GB NVMe SSD",
    cost: "$4.791",
  },
  {
    type: "G4DN",
    gpu: "NVIDIA T4",
    ram: "16 GB GDDR6",
    instance: "g4dn.metal",
    vcpus: 96,
    memory: 384,
    network: "100 Gigabit",
    storage: "2 × 900 GB NVMe SSD",
    cost: "$8.612",
  },

  // INF1
   {
    type: "INF1",
    gpu: "AWS Inferentia",
    ram: "8 GB GDDR6",
    instance: "inf1.xlarge",
    vcpus: 4,
    memory: 8,
    network: "Up to 25 Gigabit",
    storage: "EBS Only",
    cost: "$0.240",
  },
  {
    type: "INF1",
    gpu: "AWS Inferentia",
    ram: "8 GB GDDR6",
    instance: "inf1.2xlarge",
    vcpus: 8,
    memory: 16,
    network: "Up to 25 Gigabit",
    storage: "EBS Only",
    cost: "$0.381",
  },
  {
    type: "INF1",
    gpu: "AWS Inferentia",
    ram: "8 GB GDDR6",
    instance: "inf1.6xlarge",
    vcpus: 24,
    memory: 48,
    network: "25 Gigabit",
    storage: "EBS Only",
    cost: "$1.241",
  },
  {
    type: "INF1",
    gpu: "AWS Inferentia",
    ram: "8 GB GDDR6",
    instance: "inf1.24xlarge",
    vcpus: 96,
    memory: 192,
    network: "100 Gigabit",
    storage: "EBS Only",
    cost: "$4.965",
  },

  // INF2
  {
    type: "INF2",
    gpu: "AWS Inferentia",
    ram: "32 GB HBM2e",
    instance: "inf2.xlarge",
    vcpus: 4,
    memory: 16,
    network: "Up to 15 Gigabit",
    storage: "EBS Only",
    cost: "$0.985",
  },
  {
    type: "INF2",
    gpu: "AWS Inferentia",
    ram: "32 GB HBM2e",
    instance: "inf2.8xlarge",
    vcpus: 32,
    memory: 128,
    network: "Up to 25 Gigabit",
    storage: "EBS Only",
    cost: "$2.558",
  },
  {
    type: "INF2",
    gpu: "AWS Inferentia",
    ram: "32 GB HBM2e",
    instance: "inf2.24xlarge",
    vcpus: 96,
    memory: 384,
    network: "50 Gigabit",
    storage: "EBS Only",
    cost: "$8.437",
  },
  {
    type: "INF2",
    gpu: "AWS Inferentia",
    ram: "32 GB HBM2e",
    instance: "inf2.48xlarge",
    vcpus: 192,
    memory: 768,
    network: "100 Gigabit",
    storage: "EBS Only",
    cost: "$16.875",
  },
  // TRN1
  {
    type: "TRN1",
    gpu: "AWS Trainium",
    ram: "32 GB HBM2e",
    instance: "trn1.32xlarge",
    vcpus: 128,
    memory: 512,
    network: "800 Gigabit",
    storage: "4 × 1,900 GB NVMe SSD",
    cost: "$21.500",
  },
];

const ociGpuData = [
  {
    family: "BM.GPU.B200",
    gpu: "NVIDIA B200 Tensor Core",
    count: 8,
    ram: "180 GB",
    shape: "BM.GPU.B200.8",
    ocpus: 128,
    vcpu: 256,
    memory: 4096,
    network: "2 x 200 Gbps; 8 x 400 Gbps RDMA",
    storage: "8 x 3.84 TB NVMe",
    gpuCost: "$14.00",
    fullCost: "$112.00",
    india: "no",
  },

  {
    family: "BM.GPU.GB200",
    gpu: "NVIDIA Blackwell B200",
    count: 4,
    ram: "192 GB",
    shape: "BM.GPU.GB200.4",
    ocpus: 144,
    vcpu: 288,
    memory: 960,
    network: "2 x 200 Gbps; 4 x 400 Gbps RDMA",
    storage: "4 x 7.68 TB NVMe",
    gpuCost: "$16.00",
    fullCost: "$64.00",
    india: "No",
  },

  {
    family: "BM.GPU.GB300",
    gpu: "NVIDIA Blackwell B300",
    count: 4,
    ram: "278 GB",
    shape: "BM.GPU.GB300.4",
    ocpus: 144,
    vcpu: 288,
    memory: 960,
    network: "2 x 200 Gbps; 4 x 800 Gbps RDMA",
    storage: "4 x 7.68 TB NVMe",
    gpuCost: "$18.00",
    fullCost: "$72.00",
    india: "No",
  },

  {
    family: "BM.GPU.H200",
    gpu: "NVIDIA H200 Tensor Core",
    count: 8,
    ram: "141 GB",
    shape: "BM.GPU.H200.8",
    ocpus: 112,
    vcpu: 224,
    memory: 3072,
    network: "1 x 200 Gbps; 8 x 400 Gbps RDMA",
    storage: "8 x 3.84 TB NVMe",
    gpuCost: "$10.00",
    fullCost: "$80.00",
    india: "No",
  },

  {
    family: "BM.GPU.H100",
    gpu: "NVIDIA H100 Tensor Core",
    count: 8,
    ram: "80 GB",
    shape: "BM.GPU.H100.8",
    ocpus: 112,
    vcpu: 224,
    memory: 2048,
    network: "1 x 100 Gbps; 8 x 2 x 100 Gbps RDMA",
    storage: "16 x 3.84 TB NVMe",
    gpuCost: "$10.00",
    fullCost: "$80.00",
    india: "Yes",
  },

  {
    family: "BM.GPU.MI300X",
    gpu: "AMD MI300X",
    count: 8,
    ram: "192 GB",
    shape: "BM.GPU.MI300X.8",
    ocpus: 112,
    vcpu: 224,
    memory: 2048,
    network: "1 x 100 Gbps; 8 x 1 x 400 Gbps RDMA",
    storage: "8 x 3.84 TB NVMe",
    gpuCost: "$6.00",
    fullCost: "$48.00",
    india: "No",
  },

  {
    family: "BM.GPU.MI355X",
    gpu: "AMD MI355X",
    count: 8,
    ram: "288 GB",
    shape: "BM.GPU.MI355X.8",
    ocpus: 128,
    vcpu: 256,
    memory: 3072,
    network: "2 x 200 Gbps; 8 x 400 Gbps RDMA",
    storage: "8 x 7.68 TB NVMe",
    gpuCost: "$8.60",
    fullCost: "$68.80",
    india: "No",
  },

  {
    family: "BM.GPU.A100",
    gpu: "NVIDIA A100 Tensor Core",
    count: 8,
    ram: "80 GB",
    shape: "BM.GPU.A100-v2.8",
    ocpus: 128,
    vcpu: 256,
    memory: 2048,
    network: "2 x 50 Gbps; 16 x 100 Gbps RDMA",
    storage: "27.2 TB NVMe SSD (4 drives)",
    gpuCost: "$4.00",
    fullCost: "$32.00",
    india: "No",
  },

  {
    family: "BM.GPU.L40S",
    gpu: "NVIDIA L40S",
    count: 4,
    ram: "48 GB",
    shape: "BM.GPU.L40S.4",
    ocpus: 112,
    vcpu: 224,
    memory: 1024,
    network: "1 x 200 Gbps; 800 Gbps RDMA",
    storage: "2 x 3.84 TB NVMe",
    gpuCost: "$3.50",
    fullCost: "$14.00",
    india: "Yes",
  },

  {
    family: "BM.GPU4",
    gpu: "NVIDIA A100 Tensor Core",
    count: 8,
    ram: "40 GB",
    shape: "BM.GPU4.8",
    ocpus: 64,
    vcpu: 128,
    memory: 2048,
    network: "1 x 50 Gbps; 8 x 200 Gbps RDMA",
    storage: "27.2 TB NVMe SSD (4 drives)",
    gpuCost: "$3.05",
    fullCost: "$24.40",
    india: "Yes",
  },

  {
    family: "VM.GPU.A10",
    gpu: "NVIDIA A10 Tensor Core",
    count: 1,
    ram: "24 GB",
    shape: "VM.GPU.A10.1",
    ocpus: 15,
    vcpu: 30,
    memory: 240,
    network: "24 Gbps",
    storage: "Block storage only",
    gpuCost: "$2.00",
    fullCost: "$2.00",
    india: "Yes",
  },

  {
    family: "VM.GPU.A10",
    gpu: "NVIDIA A10 Tensor Core",
    count: 2,
    ram: "24 GB",
    shape: "VM.GPU.A10.2",
    ocpus: 30,
    vcpu: 60,
    memory: 480,
    network: "48 Gbps",
    storage: "Block storage only",
    gpuCost: "$2.00",
    fullCost: "$4.00",
    india: "Yes",
  },

  {
    family: "BM.GPU.A10",
    gpu: "NVIDIA A10 Tensor Core",
    count: 4,
    ram: "24 GB",
    shape: "BM.GPU.A10.4",
    ocpus: 64,
    vcpu: 128,
    memory: 1024,
    network: "2 x 50 Gbps",
    storage: "7.68 TB NVMe SSD (2 drives)",
    gpuCost: "$2.00",
    fullCost: "$8.00",
    india: "Yes",
  },
];

export default function GpuPricingTables(): JSX.Element {
  const ITEMS_PER_PAGE = 10;

  // AWS Pagination
  const [awsPage, setAwsPage] = useState<number>(1);
  const awsTotalPages = Math.ceil(
    awsGpuData.length / ITEMS_PER_PAGE
  );

  const awsPaginatedData = awsGpuData.slice(
    (awsPage - 1) * ITEMS_PER_PAGE,
    awsPage * ITEMS_PER_PAGE
  );

  // OCI Pagination
  const [ociPage, setOciPage] = useState<number>(1);

  const ociTotalPages = Math.ceil(
    ociGpuData.length / ITEMS_PER_PAGE
  );

  const ociPaginatedData = ociGpuData.slice(
    (ociPage - 1) * ITEMS_PER_PAGE,
    ociPage * ITEMS_PER_PAGE
  );

  return (
    <Container className="py-5">

      {/* Heading */}
      <Row className="mb-5">
        <Col md={12}>
          <motion.h2
            className="display-4 fw-bold text-danger text-center"
            whileInView={{ y: [-30, 0], opacity: [0, 1] }}
            transition={{ duration: 1 }}
          >
            GPU Pricing Tables
          </motion.h2>

          <motion.p
            className="text-center fw-semibold"
            whileInView={{ opacity: [0, 1] }}
            transition={{ duration: 1.2 }}
          >
            Compare AWS and OCI GPU pricing infrastructure.
          </motion.p>
        </Col>
      </Row>

      {/* AWS TABLE */}
      <Row className="mb-5">
        <Col md={12}>
          <Card className="border-0 shadow-lg rounded-4 overflow-hidden">

            <Card.Header
              className="text-white py-3"
              style={{
                background:
                  "linear-gradient(90deg, #083883 0%, #7E2D34 100%)",
              }}
            >
              <h3 className="mb-0">
                <i className="bi bi-cloud-fill me-2"></i>
                AWS GPU Instances
              </h3>
            </Card.Header>

            <div className="table-responsive">
  <table
    className="table table-hover table-striped align-middle mb-0 table-bordered"
    style={{
      borderColor: "#d1d5db",
    }}
  >

                <thead className="table-dark">
                  <tr>
                    <th>Instance Type</th>
                    <th>GPU / Accelerator Model</th>
                    <th>GPU RAM(Per GPU)</th>
                    <th>Instance Name</th>
                    <th>vCPUs</th>
                    <th>Memory(GiB)</th>
                    <th>Network Performance</th>
                    <th>Storage</th>
                    <th>On-Demand Hourly Cost ($)</th>
                  </tr>
                </thead>

                <tbody>
                  {awsPaginatedData.map((item, index) => (
                    <tr key={index}>
                      <td className="fw-bold">
                        {item.type}
                      </td>

                      <td>{item.gpu}</td>

                      <td>{item.ram}</td>

                      <td>{item.instance}</td>

                      <td>{item.vcpus}</td>

                      <td>{item.memory} GB</td>

                      <td>{item.network}</td>

                      <td>{item.storage}</td>

                      <td>
                        <span className="badge bg-success fs-6 px-3 py-2 rounded-pill">
                          {item.cost}
                        </span>
                      </td>
                    </tr>
                  ))}
                </tbody>

              </table>
            </div>

            {/* AWS Pagination */}
            <div className="d-flex justify-content-center align-items-center gap-2 py-4 flex-wrap">

              <button
                className="btn btn-outline-danger rounded-pill"
                disabled={awsPage === 1}
                onClick={() =>
                  setAwsPage((prev) => prev - 1)
                }
              >
                Previous
              </button>

              {[...Array(awsTotalPages)].map((_, index) => (
                <button
                  key={index}
                  className={`btn rounded-pill ${
                    awsPage === index + 1
                      ? "btn-danger"
                      : "btn-outline-danger"
                  }`}
                  onClick={() =>
                    setAwsPage(index + 1)
                  }
                >
                  {index + 1}
                </button>
              ))}

              <button
                className="btn btn-outline-danger rounded-pill"
                disabled={awsPage === awsTotalPages}
                onClick={() =>
                  setAwsPage((prev) => prev + 1)
                }
              >
                Next
              </button>

            </div>

          </Card>
        </Col>
      </Row>

      {/* OCI TABLE */}
      <Row>
        <Col md={12}>
          <Card className="border-0 shadow-lg rounded-4 overflow-hidden">

            <Card.Header
              className="text-white py-3"
              style={{
                background:
                  "linear-gradient(90deg, #083883 0%, #7E2D34 100%)",
              }}
            >
              <h3 className="mb-0">
                <i className="bi bi-hdd-network-fill me-2"></i>
                OCI GPU Instances
              </h3>
            </Card.Header>

            <div className="table-responsive">
  <table
    className="table table-striped table-hover align-middle mb-0 table-bordered"
    style={{
      borderColor: "#d1d5db",
    }}
  >

                <thead className="table-dark">
                  <tr>
                    <th>Shape Family </th>
                    <th>GPU / Accelerator Model</th>
                    <th>GPU Count</th>
                    <th>GPU RAM (Per GPU)</th>
                    <th>Shape Name Memory (GB)</th>
                    <th>OCPUs</th>
                    <th>vCPU</th>
                    <th>Memory</th>
                    <th>Network Performance</th>
                    <th>Storage</th>
                    <th>GPU Per Hour Cost ($)</th>
                    <th>Hourly Cost ($, Full Shape)</th>
                    <th> India Availability Status</th>
                  </tr>
                </thead>

                <tbody>
                  {ociPaginatedData.map((item, index) => (
                    <tr key={index}>
                      <td className="fw-bold">
                        {item.family}
                      </td>

                      <td>{item.gpu}</td>

                      <td>{item.count}</td>

                      <td>{item.ram}</td>

                      <td>{item.shape}</td>

                      <td>{item.ocpus}</td>

                      <td>{item.vcpu}</td>

                      <td>{item.memory} GB</td>

                      <td>{item.network}</td>

                      <td>{item.storage}</td>

                      <td>
                        <span className="badge bg-warning text-dark fs-6 px-3 py-2 rounded-pill">
                          {item.gpuCost}
                        </span>
                      </td>

                      <td>
                        <span className="badge bg-success fs-6 px-3 py-2 rounded-pill">
                          {item.fullCost}
                        </span>
                      </td>

                      <td>
                        {item.india === "Yes" ? (
                          <span className="badge bg-primary">
                            Yes
                          </span>
                        ) : (
                          <span className="badge bg-secondary">
                            No
                          </span>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>

              </table>
            </div>

            {/* OCI Pagination */}
            <div className="d-flex justify-content-center align-items-center gap-2 py-4 flex-wrap">

              <button
                className="btn btn-outline-danger rounded-pill"
                disabled={ociPage === 1}
                onClick={() =>
                  setOciPage((prev) => prev - 1)
                }
              >
                Previous
              </button>

              {[...Array(ociTotalPages)].map((_, index) => (
                <button
                  key={index}
                  className={`btn rounded-pill ${
                    ociPage === index + 1
                      ? "btn-danger"
                      : "btn-outline-danger"
                  }`}
                  onClick={() =>
                    setOciPage(index + 1)
                  }
                >
                  {index + 1}
                </button>
              ))}

              <button
                className="btn btn-outline-danger rounded-pill"
                disabled={ociPage === ociTotalPages}
                onClick={() =>
                  setOciPage((prev) => prev + 1)
                }
              >
                Next
              </button>

            </div>

          </Card>
        </Col>
      </Row>

    </Container>
  );
}