import Image from "next/image";
import Link from "next/link";

import { NewsShareActions } from "@/components/news/NewsShareActions";
import { Reveal } from "@/components/Reveal";
import type { DisplayNewsItem } from "@/lib/api";

export function NewsArticleDetail({
  item,
  basePath,
  sectionLabel,
}: {
  item: DisplayNewsItem;
  basePath: string;
  sectionLabel: string;
  sectionLabelEn: string;
}) {
  return (
    <article className="bg-paper text-ink">
      <header className="px-5 pb-20 pt-[125px] lg:px-12 lg:pb-24 lg:pt-[132px]">
        <div className="mx-auto max-w-[1400px]">
          <div className="flex items-center justify-between gap-5 text-[11px] text-[#9b896d] lg:text-[12px]">
            <Link
              href={basePath}
              className="bg-[#f1efec] px-4 py-2 text-ink transition-colors duration-300 hover:bg-ink hover:text-white"
            >
              {sectionLabel}
            </Link>
            <time>{item.date}</time>
          </div>

          <Reveal>
            <h1 className="mx-auto mt-14 max-w-[1050px] text-center text-[clamp(16px,2.55vw,34px)] leading-[1.65] font-normal text-ink lg:mt-12">
              {item.title}
            </h1>
          </Reveal>
        </div>
      </header>

      <Reveal>
        <div className="relative h-[36vh] min-h-[300px] w-full overflow-hidden lg:h-[44vh] lg:min-h-[430px]">
          <Image
            src={item.image}
            alt={item.title}
            fill
            priority
            quality={88}
            sizes="100vw"
            className="object-cover"
          />
        </div>
      </Reveal>

      <section className="px-5 pb-24 pt-32 lg:px-12 lg:pb-36 lg:pt-[clamp(13rem,27vw,28rem)]">
        <Reveal>
          <div
            className="news-article-body mx-auto max-w-[880px] text-[15px] leading-[2.25] text-ink lg:text-[17px]"
            dangerouslySetInnerHTML={{ __html: item.bodyHtml }}
          />
        </Reveal>
      </section>

      {item.gallery.length > 0 && (
        <section className="mx-auto grid max-w-[1400px] grid-cols-1 gap-8 px-5 pb-36 md:grid-cols-12 lg:gap-x-8 lg:gap-y-44 lg:px-12 lg:pb-48">
          {item.gallery.slice(0, 3).map((image, index) => (
            <Reveal
              key={`${image}-${index}`}
              className={
                index === 0
                  ? "md:col-span-8"
                  : index === 1
                    ? "md:col-span-4"
                    : "md:col-span-6 md:col-start-7"
              }
              delay={index * 80}
            >
              <div className={`relative overflow-hidden ${index === 0 ? "aspect-[16/8]" : "aspect-[16/9]"}`}>
                <Image
                  src={image}
                  alt={`${item.title} - تصویر ${index + 1}`}
                  fill
                  quality={82}
                  sizes={index === 0 ? "(max-width: 768px) 100vw, 66vw" : "(max-width: 768px) 100vw, 42vw"}
                  className="object-cover transition-transform duration-[1200ms] ease-out-soft hover:scale-[1.025]"
                />
              </div>
            </Reveal>
          ))}
        </section>
      )}

      <section className="pb-24 text-center lg:pb-32">
        <p className="mb-6 text-sm text-ink">اشتراک‌گذاری خبر</p>
        <NewsShareActions title={item.title} />
      </section>
    </article>
  );
}