import Link from "next/link";

import { cn } from "@/lib/utils/cn";
import { Separator } from "@/components/ui/separator";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { ArticleList } from "@/features/posts/_lib/transformers";
import Image from "next/image";
import { ImageQuality } from "@/config/enums/image-quality";

type OpinionProps = {
    opinion: ArticleList[number];
    variant?: "default" | "green";
};

export default function OpinionMainBlock({ opinion, variant = "default" }: OpinionProps) {
    if (!opinion) 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">opinion</h2>
                </div>
                <div className="w-full">
                    <div
                        className={cn(
                            "relative z-2 flex flex-col justify-between gap-4 overflow-hidden p-4 md:flex-row",
                            variant === "green" ? "bg-client-green" : "bg-neutral-100"
                        )}
                    >
                        <div className="grow">
                            <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={cn(
                                        "text-[26px] leading-none font-semibold lg:text-4xl",
                                        variant === "green" ? "text-white" : "text-neutral-900"
                                    )}
                                >
                                    <Link
                                        href={opinion.url}
                                        className="before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full hover:underline"
                                    >
                                        {opinion.title}
                                    </Link>
                                </h3>
                            </div>

                            <p className="font-semibold text-neutral-900 md:text-xl">{opinion.author?.name}</p>
                        </div>
                        {opinion.showAuthorPhoto ? (
                            <Avatar className="size-52 shrink-0 self-center">
                                <AvatarImage
                                    className="w-full object-cover"
                                    src={opinion.author?.avatar?.url || opinion.author?.image || ""}
                                    alt={opinion.author?.name || "Avatar image"}
                                />
                                <AvatarFallback className="text-4xl font-bold text-neutral-400">Author</AvatarFallback>
                            </Avatar>
                        ) : (
                            opinion.preview?.url && (
                                <Image
                                    src={opinion.preview?.url || ""}
                                    alt={opinion.preview?.caption || "Article image"}
                                    width={1000}
                                    height={600}
                                    className="size-52 shrink-0 self-center object-cover"
                                    quality={ImageQuality.LOW}
                                />
                            )
                        )}
                    </div>
                </div>
            </div>
        </section>
    );
}