import Image from "next/image";
import Link from "next/link";
import { RateChart } from "@/components/chart";
import { ArticleList } from "@/features/posts/_lib/transformers";

export default function RelatedVision({ title, data }: { title: string; data: ArticleList }) {
    const firstItem = data[0];
    const secondItem = data[1];
    const thirdItem = data[2];

    if (!firstItem || !secondItem || !thirdItem) 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-10 gap-y-5 lg:grid-cols-4 xl:mt-0">
                        <div className="relative grid gap-5 before:absolute before:bg-gray-200 last:before:hidden lg:col-span-3 lg:before:-right-5 lg:before:bottom-0 lg:before:h-full lg:before:w-px">
                            <Article data={firstItem} />
                            <Article data={secondItem} />
                        </div>
                        <div>
                            <Article data={thirdItem} type="small" />
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}

const Article = ({ data, type = "default" }: { data: ArticleList[number]; type?: "default" | "small" }) => {
    if (type === "small") {
        return (
            <article className="relative h-full bg-blue-50">
                <p className="bg-client-blue p-3 text-xs tracking-wide text-white uppercase">MEST POPULÆR SENESTE ÅR</p>
                <div className="items-center gap-5 p-3">
                    <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>
                        {data.city.name && (
                            <Link
                                className="text-client-blue label-text relative z-10 mb-5 flex gap-1 uppercase"
                                href={data.city.url}
                            >
                                <svg
                                    id="map-pin"
                                    className="fill-client-blue 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>
                    {!!data.vision?.percent && (
                        <div className="flex justify-center">
                            <RateChart
                                value={data.vision.percent}
                                fillColor="var(--color-client-blue)"
                                emptyColor="var(--color-gray-200)"
                                className="size-28"
                            />
                        </div>
                    )}
                </div>
            </article>
        );
    }
    return (
        <article className="relative bg-blue-50 sm:flex sm:items-start">
            {data.preview?.url && (
                <Image
                    src={data.preview?.url}
                    alt={data.preview?.caption || "Vision image"}
                    width={1000}
                    height={600}
                    className="w-full grow object-cover sm:aspect-3/2 sm:max-w-62"
                />
            )}
            <div className="items-center gap-5 p-3 sm:flex md:h-full">
                <div className="md:h-full">
                    <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>
                    {data.city.name && (
                        <Link
                            className="text-client-blue label-text relative z-10 flex gap-1 uppercase"
                            href={data.city.url}
                        >
                            <svg
                                id="map-pin"
                                className="fill-client-blue 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>
                {!!data.vision?.percent && (
                    <div className="flex justify-center lg:pr-8">
                        <RateChart
                            value={data.vision.percent}
                            fillColor="var(--color-client-blue)"
                            emptyColor="var(--color-gray-200)"
                            className="size-28"
                        />
                    </div>
                )}
            </div>
        </article>
    );
};