import Link from "next/link";

type PrevNextPostItem = {
  slug: string;
  title: string;
};

type PrevNextPostProps = {
  previousPost: PrevNextPostItem | null;
  nextPost: PrevNextPostItem | null;
};

export default function PrevNextPost({
  previousPost,
  nextPost,
}: PrevNextPostProps) {
  if (!previousPost && !nextPost) return null;
    return (
    <>
    <hr className="w-full border-[#202020]/10 my-8"/>
    <div className="container mx-auto">
      <div className="grid md:grid-cols-2 gap-[30px]">

        {previousPost ? (
          <Link
            href={`/blog/${previousPost.slug}`}
            className="bg-white border border-[#202020]/15 rounded-xl p-6 hover:bg-[#101010] transition group"
          >
            <p className="text-sm md:text-lg text-[#202020] group-hover:text-white mb-2 font-medium flex items-center gap-2">
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" className="rotate-180">
                    <path d="M8.67188 0.5L17.3026 8.73842L8.67188 16.9768" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
                    <path d="M17.2999 8.73828L0.5 8.73828" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
                Previous Post
            </p>
            <h3 className="text-lg text-[#202020]/70 group-hover:text-white">
              {previousPost.title}
            </h3>
          </Link>
        ) : <div />}

        {nextPost && (
          <Link
            href={`/blog/${nextPost.slug}`}
            className="bg-white border border-[#202020]/15 rounded-xl p-6 text-right hover:bg-[#101010] transition group"
          >
            <p className="text-sm md:text-lg text-[#202020] group-hover:text-white mb-2 font-medium flex items-center gap-2 justify-end">
                Next Post
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" className="rotate-0">
                    <path d="M8.67188 0.5L17.3026 8.73842L8.67188 16.9768" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
                    <path d="M17.2999 8.73828L0.5 8.73828" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
            </p>
            <h3 className="text-lg text-[#202020]/70 group-hover:text-white">
              {nextPost.title}
            </h3>
          </Link>
        )}

      </div>
    </div>
    </>
  );
}
