import type { Layout2ProjectNavSide } from "@/data/portfolio-layout2";
import DataLink from "@/components/common/DataLink";
import Layout2Image from "./Layout2Image";

export default function Layout2ProjectNav({
  prev,
  next,
}: {
  prev: Layout2ProjectNavSide;
  next: Layout2ProjectNavSide;
}) {
  return (
    <div className="digital-agency space-top">
      <div className="sasi-project-navigation">
        <div className="carousel-container">
          <div className="post-nav">
            <div className="btn-nav post-prev m-0">
              <DataLink href={prev.href} title={prev.linkTitle}>
                <div className="nav-thumb">
                  <Layout2Image
                    src={prev.thumbSrc}
                    alt={prev.thumbAlt}
                    width={prev.thumbWidth}
                    height={prev.thumbHeight}
                  />
                  <Layout2Image
                    src={prev.arrowSrc}
                    alt={prev.arrowAlt}
                    width={prev.arrowWidth}
                    height={prev.arrowHeight}
                    className="post-btn"
                  />
                </div>
                <div className="nav-text">
                  <h1 className="title4">{prev.projectTitle}</h1>
                  <span>Read more</span>
                </div>
              </DataLink>
            </div>
            <div className="btn-nav post-next m-0">
              <DataLink href={next.href} title={next.linkTitle}>
                <div className="nav-text">
                  <h1 className="title4">{next.projectTitle}</h1>
                  <span>Read more</span>
                </div>
                <div className="nav-thumb">
                  <Layout2Image
                    src={next.thumbSrc}
                    alt={next.thumbAlt}
                    width={next.thumbWidth}
                    height={next.thumbHeight}
                  />
                  <Layout2Image
                    src={next.arrowSrc}
                    alt={next.arrowAlt}
                    width={next.arrowWidth}
                    height={next.arrowHeight}
                    className="post-btn"
                  />
                </div>
              </DataLink>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}