import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Separator } from "@/components/ui/separator";
import { ArticleList } from "@/features/posts/_lib/transformers";
import Link from "next/link";

export default function RelatedOpinion({ 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 lg:grid-cols-2 lg:gap-x-10 xl:mt-0">
                        {data.map((item, index) => (
                            <div key={index} className="border-style">
                                <Article data={item} />
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </section>
    );
}
const Article = ({ data }: { data: ArticleList[number] }) => {
    return (
        <article className="bg-client-green relative z-2 flex h-full flex-col justify-between gap-5 overflow-hidden p-5 sm:flex-row">
            <div>
                <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 mb-2 block size-14 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-white">
                    <Link
                        href={data.url}
                        className="before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full hover:underline"
                        dangerouslySetInnerHTML={{ __html: data.title }}
                    />
                </h3>
                <Separator className="bg-client-light-green my-4" />
                <p className="font-serif font-semibold text-neutral-900">{data.author?.name}</p>
            </div>

            <Avatar className="size-44 shrink-0 self-center sm:self-start">
                <AvatarImage src={data.author?.media?.url || ""} alt={data.author?.name || "Author avatar"} />
                <AvatarFallback className="text-4xl font-bold text-neutral-400">Author</AvatarFallback>
            </Avatar>
        </article>
    );
};