import type { Layout1ProjectNavSide } from "@/data/portfolio-layout1";
import DataLink from "@/components/common/DataLink";
import Layout1Image from "./Layout1Image";

export default function Layout1ProjectNav({
  prev,
  next,
}: {
  prev: Layout1ProjectNavSide;
  next: Layout1ProjectNavSide;
}) {
  return (
    <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">
                <Layout1Image
                  src={prev.thumbSrc}
                  alt={prev.thumbAlt}
                  width={prev.thumbWidth}
                  height={prev.thumbHeight}
                />
                <Layout1Image
                  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">
                <Layout1Image
                  src={next.thumbSrc}
                  alt={next.thumbAlt}
                  width={next.thumbWidth}
                  height={next.thumbHeight}
                />
                <Layout1Image
                  src={next.arrowSrc}
                  alt={next.arrowAlt}
                  width={next.arrowWidth}
                  height={next.arrowHeight}
                  className="post-btn"
                />
              </div>
            </DataLink>
          </div>
        </div>
      </div>
    </div>
  );
}