import type { BlogPostNavItem } from "@/data/blog-post-detail";
import DataLink from "@/components/common/DataLink";
import Image from "next/image";

export default function BlogPostAdjacentNav({ items }: { items: BlogPostNavItem[] }) {
  return (
    <div className="post-nav">
      {items.map((item) => {
        const isPrev = item.id === "prev";
        const navClass = isPrev ? "btn-nav post-prev" : "btn-nav post-next";

        const thumb = (
          <div className="nav-thumb">
            <Image
              src={item.thumb.src}
              alt={item.thumb.alt}
              width={item.thumb.width}
              height={item.thumb.height}
            />
            <Image
              src={item.arrow.src}
              alt={item.arrow.alt}
              width={item.arrow.width}
              height={item.arrow.height}
              className="post-btn"
            />
          </div>
        );

        const text = (
          <div className="nav-text">
            <h1 className="title">{item.title}</h1>
            <span>Read more</span>
          </div>
        );

        return (
          <div key={item.id} className={navClass}>
            <DataLink href={item.href} title="">
              {isPrev ? (
                <>
                  {thumb}
                  {text}
                </>
              ) : (
                <>
                  {text}
                  {thumb}
                </>
              )}
            </DataLink>
          </div>
        );
      })}
    </div>
  );
}