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

export default function LatestVision({ title, data }: { title: string; data: ArticleList }) {
    if (!data.length) return;
    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="mt-5 grid gap-x-5 gap-y-10 sm:grid-cols-2 lg:grid-cols-4 lg:gap-x-10 xl:mt-0">
                        {data.map((item, index) => (
                            <div
                                key={index}
                                className="relative before:absolute before:bg-gray-200 last:before:hidden sm:before:-right-[10px] sm:before:bottom-0 sm:before:h-full sm:before:w-px sm:max-lg:nth-[2n]:before:hidden lg:before:-right-[20px] lg:nth-[4n]:before:hidden"
                            >
                                <Article data={item} />
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </section>
    );
}

const Article = ({ data }: { data: ArticleList[number] }) => {
    return (
        <article className="relative">
            {data.preview?.url && (
                <Image
                    src={data.preview?.url}
                    alt={data.preview?.caption || "Vision image"}
                    width={1000}
                    height={600}
                    className="w-full object-cover sm:aspect-3/2"
                />
            )}
            <div className="py-3">
                <div>
                    <div className="mb-5 flex flex-col">
                        <div className="label-text text-neutral-500 uppercase">
                            <Circle className="stroke-client-blue fill-client-blue mr-1 mb-0.5 inline size-3" />
                            visioner
                        </div>
                        {data.city.name && (
                            <Link className="label-text relative z-10 text-neutral-500 uppercase" href={data.city.url}>
                                <svg
                                    id="map-pin"
                                    className="fill-client-blue mr-1 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>

                    <h3 className="mb-5 text-[26px] leading-none font-semibold text-neutral-800">
                        <Link
                            href={data.url}
                            className="before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full hover:underline"
                        >
                            {data.title}
                        </Link>
                    </h3>
                    <p className="text-neutral-600">{data.description.replaceAll("&shy;", "\u00AD")}</p>
                </div>
            </div>
        </article>
    );
};