import Image from "next/image";
import Link from "next/link";
import { Camera } from "lucide-react";
import { ArticleList } from "@/features/posts/_lib/transformers";
import { cn } from "@/lib/utils";

export default function RelatedPhoto({
    title,
    data,
    type = "default"
}: {
    title: string;
    data: ArticleList;
    type?: "default" | "large";
}) {
    if (!data?.length) return null;

    return (
        <section className="mx-auto w-full max-w-[1362px] grow px-3 md:px-8 xl:border-x">
            <div className="mt-4 flex flex-col border-t pt-4 xl:flex-row">
                <div className="shrink-0 xl:w-68">
                    <h2 className="pr-8 text-xl leading-none font-bold text-[#CBCBCB] md:text-3xl">{title}</h2>
                </div>
                <div className="w-full">
                    <div
                        className={cn(
                            "mt-5 grid gap-x-10 gap-y-5 sm:grid-cols-2 xl:mt-0",
                            type === "default" && "lg:grid-cols-4"
                        )}
                    >
                        {data.map((item, index) => (
                            <div
                                key={index}
                                className="relative before:absolute before:bg-neutral-500 last:before:hidden sm:before:-right-5 sm:before:bottom-0 sm:before:h-full sm:before:w-px sm:max-lg:nth-[2n]:before:hidden lg:nth-[4n]:before:hidden"
                            >
                                <Article data={item} />
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </section>
    );
}

const Article = ({ data }: { data: ArticleList[number] }) => {
    const isSponsored = true;
    return (
        <article className="relative size-full bg-neutral-900 text-white">
            {data.preview?.url && (
                <Image
                    src={data.preview?.url}
                    alt={data.preview?.caption || "Article image"}
                    width={1000}
                    height={600}
                    className="w-full object-cover sm:aspect-3/2"
                />
            )}
            <div className="grow p-2">
                <div className="flex justify-between">
                    <div className="mb-3 flex flex-col">
                        <span className="label-text text-client-orange uppercase">
                            <Camera className="fill-client-orange mr-1 mb-0.5 inline size-5 stroke-neutral-900 stroke-[1]" />
                            {isSponsored ? "sponsoreret" : data.topic}
                        </span>
                        {data.city.name && (
                            <Link className="label-text relative z-10 text-neutral-400 uppercase" href={data.city.url}>
                                <svg
                                    id="map-pin"
                                    className="fill-client-orange 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="before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full hover:underline">
                                    {data.city.name}
                                </span>
                            </Link>
                        )}
                    </div>
                </div>
                <h5 className="mt-3 mb-4 text-[26px] leading-[1.1] font-semibold">
                    <Link
                        href={data.url}
                        className="before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full hover:underline"
                        dangerouslySetInnerHTML={{ __html: data.title }}
                    />
                </h5>
                <p className="mb-4 font-serif font-medium text-neutral-400">
                    {data.description.replaceAll("&shy;", "\u00AD")}
                </p>
            </div>
        </article>
    );
};