import { Separator } from "@/components/ui/separator";
import Image from "next/image";
import Link from "next/link";
import { RateChart } from "@/components/chart";
import { ArticleList } from "@/features/posts/_lib/transformers";
import { ImageQuality } from "@/config/enums/image-quality";

export default function VisionsMainBlock({
    mainData,
    secondaryData
}: {
    mainData: ArticleList[number];
    secondaryData: ArticleList;
}) {
    if (!mainData || !secondaryData.length) return;

    return (
        <section className="mx-auto w-full max-w-[1362px] grow p-3 md:px-8 md:py-4 xl:border-x">
            <Separator className="mb-4" />
            <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">visioner</h2>
                </div>
                <div className="w-full">
                    <article className="relative gap-5 md:flex">
                        {mainData.preview?.url && (
                            <Image
                                src={mainData.preview?.url}
                                alt={mainData.preview?.caption || "Vision image"}
                                width={1000}
                                height={600}
                                className="w-full shrink-0 object-cover md:aspect-3/2 md:w-[60%] lg:w-[76%]"
                                quality={ImageQuality.LOW}
                            />
                        )}
                        <div className="flex items-center justify-between py-2 md:flex-col md:justify-normal">
                            <div>
                                <span className="label-text mb-5 inline-block text-neutral-600 uppercase">
                                    {mainData.vision?.tag}
                                </span>
                                <h3 className="mb-5 text-[26px] leading-none font-semibold">
                                    <Link
                                        href={mainData.url}
                                        className="before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full hover:underline"
                                    >
                                        {mainData.title}
                                    </Link>
                                </h3>
                                {mainData.city.name && (
                                    <Link
                                        className="label-text relative z-10 my-5 flex gap-1 text-neutral-500 uppercase"
                                        href={mainData.city.url}
                                    >
                                        <svg
                                            id="map-pin"
                                            className="fill-client-blue 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">
                                            {mainData.city.name}
                                        </span>
                                    </Link>
                                )}
                            </div>
                            {!!mainData.vision?.percent && (
                                <div className="flex justify-center">
                                    <RateChart
                                        value={mainData.vision?.percent}
                                        fillColor="var(--color-client-blue)"
                                        emptyColor="var(--color-gray-200)"
                                        className="size-28 md:size-34"
                                    />
                                </div>
                            )}
                        </div>
                    </article>
                    <div className="mt-5 grid grid-cols-1 gap-5 md:grid-cols-2">
                        {secondaryData?.map((item, index) => (
                            <article className="relative flex items-center bg-blue-50 p-3 sm:p-5" key={index}>
                                <div>
                                    <span className="label-text mb-2 inline-block text-neutral-600 uppercase">
                                        {item.vision?.tag}
                                    </span>
                                    <h3 className="mb-2 text-[26px] leading-none font-semibold">
                                        <Link
                                            href={item.url}
                                            className="before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full hover:underline"
                                        >
                                            {item.title}
                                        </Link>
                                    </h3>
                                    {item.city.name && (
                                        <Link
                                            className="label-text relative z-10 mt-2 inline-flex gap-1 text-neutral-500 uppercase"
                                            href={item.city.url}
                                        >
                                            <svg
                                                id="map-pin"
                                                className="fill-client-blue 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">
                                                {item.city.name}
                                            </span>
                                        </Link>
                                    )}
                                </div>
                                {!!item.vision?.percent && (
                                    <div className="flex shrink-0 justify-center">
                                        <RateChart
                                            value={item.vision.percent}
                                            fillColor="var(--color-client-blue)"
                                            emptyColor="var(--color-gray-200)"
                                            className="size-28"
                                        />
                                    </div>
                                )}
                            </article>
                        ))}
                    </div>
                </div>
            </div>
        </section>
    );
}