import Image from "next/image";
import Link from "next/link";
import CityMainItem from "./city-main-item";
import { ArticleList } from "@/features/posts/_lib/transformers";
import { ImageQuality } from "@/config/enums/image-quality";

export default function KbhMainBlock({
    mainData,
    secondaryData
}: {
    mainData?: ArticleList[number];
    secondaryData?: ArticleList[number];
}) {
    if (!mainData || !secondaryData) return null;

    return (
        <section className="border-y border-y-neutral-400 bg-[#f4f2ed]">
            <div className="mx-auto w-full max-w-[1362px] p-3 md:p-[30px]">
                <div className="flex flex-col xl:flex-row">
                    <div className="w-68 shrink-0">
                        <h2 className="mb-4 text-xl leading-none font-bold text-[#CBCBCB] md:text-3xl">KBH+</h2>
                    </div>
                    <div className="w-full">
                        <div className="grid grid-cols-1 gap-x-[40px] gap-y-5 lg:grid-cols-[3fr_22%]">
                            <article className="relative before:absolute before:top-0 before:-right-5 before:h-full before:w-0 before:bg-gray-300 last:before:w-0 lg:before:w-px">
                                <div className="relative flex h-full flex-col-reverse gap-x-5 sm:flex-row">
                                    <div>
                                        <div className="flex justify-between gap-x-2">
                                            {mainData.city.name && (
                                                <Link
                                                    className="label-text relative z-10 text-neutral-500 uppercase"
                                                    href={mainData.city.url}
                                                >
                                                    <svg
                                                        id="map-pin"
                                                        className="fill-client-red mr-0.5 mb-0.5 inline size-3"
                                                        width="64.615px"
                                                        height="96.922px"
                                                        viewBox="0 0 64.615 96.922"
                                                    >
                                                        <path
                                                            d="M62.532,43.603L39.564,92.442c-1.325,2.776-4.228,4.48-7.257,4.48s-5.931-1.704-7.193-4.48L2.083,43.603
		C0.442,40.132,0,36.156,0,32.307C0,14.45,14.45,0,32.307,0c17.857,0,32.308,14.45,32.308,32.307
		C64.615,36.156,64.173,40.132,62.532,43.603z M32.307,16.154c-8.896,0-16.153,7.257-16.153,16.153
		c0,8.897,7.257,16.154,16.153,16.154c8.897,0,16.154-7.257,16.154-16.154C48.461,23.411,41.204,16.154,32.307,16.154z"
                                                        />
                                                    </svg>
                                                    <span className="hover:underline">{mainData.city.name}</span>
                                                </Link>
                                            )}
                                        </div>
                                        <h3 className="mt-6 mb-4 text-[26px] leading-none font-semibold lg:text-4xl">
                                            <Link
                                                href={mainData.url}
                                                className="before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full hover:underline"
                                                dangerouslySetInnerHTML={{ __html: mainData.title }}
                                            />
                                        </h3>
                                        {!!mainData.description && (
                                            <p className="text-neutral-600">
                                                {mainData.description.replaceAll("&shy;", "\u00AD")}
                                            </p>
                                        )}
                                    </div>
                                    {mainData.preview?.url && (
                                        <Image
                                            src={mainData.preview?.url}
                                            alt={mainData.preview?.caption || "Article image"}
                                            width={1000}
                                            height={600}
                                            className="object-cover sm:w-[65%]"
                                            quality={ImageQuality.LOW}
                                        />
                                    )}
                                </div>
                            </article>
                            <CityMainItem article={secondaryData} hideShares hideDesc />
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}