import OpinionItem from "@/components/shared/articles/opinion-item";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Separator } from "@/components/ui/separator";
import { ArticleList } from "@/features/posts/_lib/transformers";
import formatDate from "@/lib/utils/format-date";
import Image from "next/image";
import Link from "next/link";

export default function OpinionTopBlock({ data }: { data: ArticleList }) {
    const firstItem = data[0];
    const secondItem = data[1];
    const thirdItem = data[2];
    const fourthItem = data[3];
    const row = data.slice(4, 8);

    if (!data.length) {
        return (
            <div className="my-6">
                <p className="text-lg font-medium">Ingen opinion fundet</p>
            </div>
        );
    }

    return (
        <div>
            {!!firstItem && (
                <article className="relative mb-5 flex flex-col sm:flex-row">
                    {firstItem?.preview?.url && (
                        <div className="w-full shrink-0 sm:max-lg:max-w-[calc(50%-6px)] lg:max-w-[62%]">
                            <Image
                                src={firstItem.preview?.url}
                                alt={firstItem.title || "Opinion image"}
                                width={640}
                                height={520}
                                className="size-full object-cover sm:aspect-3/2"
                            />
                        </div>
                    )}

                    <div className="bg-client-green grow p-5">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            id="quotation"
                            width="67.531"
                            height="57.997"
                            viewBox="0 0 67.531 57.997"
                            aria-hidden
                            className="mb-1 size-10 fill-white"
                        >
                            <path
                                id="Path_19"
                                data-name="Path 19"
                                d="M23.834.6h0c-5.561,2.383-10.328,4.767-14.3,7.945S3.178,16.49,1.589,20.462A111.562,111.562,0,0,0,0,38.735V56.213A2.537,2.537,0,0,0,2.383,58.6H27.012A2.537,2.537,0,0,0,29.4,56.213V31.585A2.537,2.537,0,0,0,27.012,29.2H17.478c0-3.972,1.589-6.356,3.178-8.739s4.767-4.767,9.534-6.356c.794,0,1.589-1.589,1.589-2.383h0L26.218,1.394C25.423,1.394,24.629.6,23.834.6ZM60.38.6h0c-6.356,2.383-11.123,4.767-14.3,7.945-3.972,3.178-6.356,7.945-7.945,11.917-1.589,4.767-1.589,11.123-1.589,18.273V56.213A2.537,2.537,0,0,0,38.929,58.6H63.558a2.537,2.537,0,0,0,2.383-2.383V31.585A2.537,2.537,0,0,0,63.558,29.2H53.23c0-3.972,1.589-6.356,3.178-8.739s4.767-4.767,9.534-6.356c.794,0,1.589-1.589,1.589-2.383h0L61.969,1.394A2.774,2.774,0,0,0,60.38.6Z"
                            />
                        </svg>
                        {firstItem.createdAt && (
                            <p className="label-text text-neutral-900">{formatDate(firstItem.createdAt)}</p>
                        )}
                        <h5 className="my-2 text-[26px] leading-[1.1] font-semibold text-white lg:text-4xl">
                            <Link
                                href={firstItem.url}
                                className="before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full hover:underline"
                            >
                                {firstItem.title}
                            </Link>
                        </h5>
                        <Separator className="my-4 opacity-20" />
                        <p className="font-serif text-base font-bold text-neutral-900 lg:text-xl">
                            {firstItem.author?.name}
                        </p>
                    </div>
                </article>
            )}
            {!!secondItem && (
                <article className="relative z-2 mb-5 flex flex-col justify-between gap-5 overflow-hidden bg-neutral-100 p-5 sm:flex-row">
                    <div className="grow">
                        {!!secondItem.createdAt && (
                            <span className="label-text block text-neutral-900 uppercase md:-mb-6">
                                {formatDate(secondItem.createdAt)}
                            </span>
                        )}
                        <div className="title border-b-client-light-green relative mb-3 border-b pb-3 md:pt-28">
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                id="quotation"
                                width="67.531"
                                height="57.997"
                                viewBox="0 0 67.531 57.997"
                                aria-hidden
                                className="fill-client-light-green top-0 left-0 -z-1 block size-18 object-contain md:absolute md:h-[calc(100%-6px)] md:w-fit"
                            >
                                <path
                                    id="Path_19"
                                    data-name="Path 19"
                                    d="M23.834.6h0c-5.561,2.383-10.328,4.767-14.3,7.945S3.178,16.49,1.589,20.462A111.562,111.562,0,0,0,0,38.735V56.213A2.537,2.537,0,0,0,2.383,58.6H27.012A2.537,2.537,0,0,0,29.4,56.213V31.585A2.537,2.537,0,0,0,27.012,29.2H17.478c0-3.972,1.589-6.356,3.178-8.739s4.767-4.767,9.534-6.356c.794,0,1.589-1.589,1.589-2.383h0L26.218,1.394C25.423,1.394,24.629.6,23.834.6ZM60.38.6h0c-6.356,2.383-11.123,4.767-14.3,7.945-3.972,3.178-6.356,7.945-7.945,11.917-1.589,4.767-1.589,11.123-1.589,18.273V56.213A2.537,2.537,0,0,0,38.929,58.6H63.558a2.537,2.537,0,0,0,2.383-2.383V31.585A2.537,2.537,0,0,0,63.558,29.2H53.23c0-3.972,1.589-6.356,3.178-8.739s4.767-4.767,9.534-6.356c.794,0,1.589-1.589,1.589-2.383h0L61.969,1.394A2.774,2.774,0,0,0,60.38.6Z"
                                />
                            </svg>

                            <h3 className="text-[26px] leading-none font-semibold text-neutral-900 lg:text-4xl">
                                <Link
                                    href={secondItem.url}
                                    className="before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full hover:underline"
                                    dangerouslySetInnerHTML={{ __html: secondItem.title }}
                                />
                            </h3>
                        </div>

                        <p className="font-serif font-semibold text-neutral-900 md:text-xl">
                            {secondItem.author?.name}
                        </p>
                    </div>
                    {secondItem.showAuthorPhoto ? (
                        <Avatar className="size-52 shrink-0 self-center">
                            <AvatarImage
                                className="w-full object-cover"
                                src={secondItem.author?.avatar?.url || secondItem.author?.image || ""}
                                alt={secondItem.author?.name || "Avatar image"}
                            />
                            <AvatarFallback className="text-4xl font-bold text-neutral-400">Author</AvatarFallback>
                        </Avatar>
                    ) : (
                        secondItem.preview?.url && (
                            <Image
                                src={secondItem.preview?.url || ""}
                                alt={secondItem.preview?.caption || "Article image"}
                                width={1000}
                                height={600}
                                className="size-52 shrink-0 self-center object-cover"
                            />
                        )
                    )}
                </article>
            )}
            <div className="mb-5 grid flex-col gap-5 lg:grid-cols-2">
                {!!thirdItem && (
                    <article className="relative z-2 flex flex-col justify-between gap-5 overflow-hidden bg-neutral-100 p-5 sm:flex-row">
                        <div className="grow">
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                id="quotation"
                                width="67.531"
                                height="57.997"
                                viewBox="0 0 67.531 57.997"
                                aria-hidden
                                className="fill-client-light-green my-1 block size-17 object-contain"
                            >
                                <path
                                    id="Path_19"
                                    data-name="Path 19"
                                    d="M23.834.6h0c-5.561,2.383-10.328,4.767-14.3,7.945S3.178,16.49,1.589,20.462A111.562,111.562,0,0,0,0,38.735V56.213A2.537,2.537,0,0,0,2.383,58.6H27.012A2.537,2.537,0,0,0,29.4,56.213V31.585A2.537,2.537,0,0,0,27.012,29.2H17.478c0-3.972,1.589-6.356,3.178-8.739s4.767-4.767,9.534-6.356c.794,0,1.589-1.589,1.589-2.383h0L26.218,1.394C25.423,1.394,24.629.6,23.834.6ZM60.38.6h0c-6.356,2.383-11.123,4.767-14.3,7.945-3.972,3.178-6.356,7.945-7.945,11.917-1.589,4.767-1.589,11.123-1.589,18.273V56.213A2.537,2.537,0,0,0,38.929,58.6H63.558a2.537,2.537,0,0,0,2.383-2.383V31.585A2.537,2.537,0,0,0,63.558,29.2H53.23c0-3.972,1.589-6.356,3.178-8.739s4.767-4.767,9.534-6.356c.794,0,1.589-1.589,1.589-2.383h0L61.969,1.394A2.774,2.774,0,0,0,60.38.6Z"
                                />
                            </svg>
                            {!!thirdItem.createdAt && (
                                <span className="label-text block text-neutral-900 uppercase">
                                    {formatDate(thirdItem.createdAt)}
                                </span>
                            )}
                            <h3 className="text-[26px] leading-none font-semibold text-neutral-900">
                                <Link
                                    href={thirdItem.url}
                                    className="before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full hover:underline"
                                    dangerouslySetInnerHTML={{ __html: thirdItem.title }}
                                />
                            </h3>
                            <Separator className="bg-client-light-green my-4" />
                            <p className="font-serif font-semibold text-neutral-900">{thirdItem.author?.name}</p>
                        </div>
                        {thirdItem.showAuthorPhoto ? (
                            <Avatar className="size-52 shrink-0 self-start">
                                <AvatarImage
                                    className="w-full object-cover"
                                    src={thirdItem.author?.avatar?.url || thirdItem.author?.image || ""}
                                    alt={thirdItem.author?.name || "Avatar image"}
                                />
                                <AvatarFallback className="text-4xl font-bold text-neutral-400">Author</AvatarFallback>
                            </Avatar>
                        ) : (
                            thirdItem.preview?.url && (
                                <Image
                                    src={thirdItem.preview?.url || ""}
                                    alt={thirdItem.preview?.caption || "Article image"}
                                    width={1000}
                                    height={600}
                                    className="size-52 shrink-0 self-start object-cover md:self-start"
                                />
                            )
                        )}
                    </article>
                )}
                {!!fourthItem && (
                    <article className="relative z-2 flex flex-col justify-between overflow-hidden bg-neutral-100 sm:max-lg:flex-row">
                        {fourthItem.showAuthorPhoto ? (
                            <Avatar className="size-52 shrink-0 self-center">
                                <AvatarImage
                                    className="w-full object-cover"
                                    src={fourthItem.author?.avatar?.url || fourthItem.author?.image || ""}
                                    alt={fourthItem.author?.name || "Avatar image"}
                                />
                                <AvatarFallback className="text-4xl font-bold text-neutral-400">Author</AvatarFallback>
                            </Avatar>
                        ) : (
                            fourthItem.preview?.url && (
                                <div className="w-full shrink-0 sm:max-lg:max-w-[calc(50%-6px)] lg:max-h-50 lg:max-w-full">
                                    <Image
                                        src={fourthItem.preview?.url || ""}
                                        alt={fourthItem.preview?.caption || "Article image"}
                                        width={1000}
                                        height={600}
                                        className="size-full object-cover"
                                    />
                                </div>
                            )
                        )}

                        <div className="px-5 pt-4 pb-6">
                            <div className="gap-3 sm:flex">
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    id="quotation"
                                    width="67.531"
                                    height="57.997"
                                    viewBox="0 0 67.531 57.997"
                                    aria-hidden
                                    className="fill-client-light-green size-17 shrink-0 object-contain"
                                >
                                    <path
                                        id="Path_19"
                                        data-name="Path 19"
                                        d="M23.834.6h0c-5.561,2.383-10.328,4.767-14.3,7.945S3.178,16.49,1.589,20.462A111.562,111.562,0,0,0,0,38.735V56.213A2.537,2.537,0,0,0,2.383,58.6H27.012A2.537,2.537,0,0,0,29.4,56.213V31.585A2.537,2.537,0,0,0,27.012,29.2H17.478c0-3.972,1.589-6.356,3.178-8.739s4.767-4.767,9.534-6.356c.794,0,1.589-1.589,1.589-2.383h0L26.218,1.394C25.423,1.394,24.629.6,23.834.6ZM60.38.6h0c-6.356,2.383-11.123,4.767-14.3,7.945-3.972,3.178-6.356,7.945-7.945,11.917-1.589,4.767-1.589,11.123-1.589,18.273V56.213A2.537,2.537,0,0,0,38.929,58.6H63.558a2.537,2.537,0,0,0,2.383-2.383V31.585A2.537,2.537,0,0,0,63.558,29.2H53.23c0-3.972,1.589-6.356,3.178-8.739s4.767-4.767,9.534-6.356c.794,0,1.589-1.589,1.589-2.383h0L61.969,1.394A2.774,2.774,0,0,0,60.38.6Z"
                                    />
                                </svg>

                                <h3 className="text-[26px] leading-none font-semibold text-neutral-900">
                                    <Link
                                        href={fourthItem.url}
                                        className="before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full hover:underline"
                                        dangerouslySetInnerHTML={{ __html: fourthItem.title }}
                                    />
                                </h3>
                            </div>
                            <Separator className="bg-client-light-green my-4" />
                            <p className="font-serif font-semibold text-neutral-900">{fourthItem.author?.name}</p>
                        </div>
                    </article>
                )}
            </div>
            <Separator className="my-5" />
            {!!row.length && (
                <ul className="grid gap-x-[40px] gap-y-5 lg:grid-cols-4">
                    {row.map((item) => {
                        return (
                            <li
                                className="border-style border-t pt-5 first:border-none first:pt-0 sm:border-none sm:pt-0"
                                key={item.id}
                            >
                                <OpinionItem data={item} />
                            </li>
                        );
                    })}
                </ul>
            )}
        </div>
    );
}