import Image from "next/image";
import { blogPaginationItems } from "@/data/blogPagination";

function isIconItem(
  item: (typeof blogPaginationItems)[number],
): item is Extract<(typeof blogPaginationItems)[number], { icon: string }> {
  return "icon" in item;
}

export default function Pagination() {
  return (
    <section className="space">
      <nav
        aria-label="Page navigation example"
        data-aos="fade-up"
        data-aos-duration={900}
        data-aos-delay={300}
      >
        <ul className="pagination blog-pagination v2">
          {blogPaginationItems.map((item) => (
            <li key={item.id} className="page-item">
              <a
                className="page-link"
                href={item.href}
                aria-label={isIconItem(item) ? item.ariaLabel : undefined}
              >
                {isIconItem(item) ? (
                  <span aria-hidden="true">
                    <Image
                      src={item.icon}
                      alt={item.iconAlt}
                      width={16}
                      height={16}
                      style={{ width: "auto", height: "auto" }}
                    />
                  </span>
                ) : (
                  item.label
                )}
              </a>
            </li>
          ))}
        </ul>
      </nav>
    </section>
  );
}