import { widgetAlign, WidgetPosition } from "@/config/enums/tip-tap";
import { cn } from "@/lib/utils";
import { FactProps } from "../../types/types";
import Image from "next/image";
import { ImageQuality } from "@/config/enums/image-quality";
import PostContentRenderer from "../../tiptap-renderer/post-content-renderer";

export default function FactWidget({ props }: { props: FactProps }) {
    if (!props) {
        return null;
    }
    const { label, variant, media, title, description } = props;

    const isLeftCol = variant === WidgetPosition.LEFT_COL;

    if (isLeftCol) {
        return (
            <div className={cn(widgetAlign[variant])}>
                <article className="word-break border-t bg-neutral-50 px-4 pt-4 pb-6">
                    {!!label && (
                        <div className="text-client-red mb-5 flex gap-2 md:mb-7">
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 512 512"
                                className="mt-0.5 size-4 shrink-0"
                                fill="currentColor"
                            >
                                <path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zM224 160a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm-8 64l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z" />
                            </svg>
                            <span className="text-[15px] font-bold uppercase">{label}</span>
                        </div>
                    )}
                    {!!title && (
                        <h5 className="text-primary mb-3.5 font-sans text-lg leading-[1.1] font-bold last:mb-0 md:text-2xl">
                            {title}
                        </h5>
                    )}
                    {!!media.length && (
                        <div className="-mx-4 mb-4 last:mb-0">
                            <Image
                                src={media[0].url}
                                alt={media[0].alt || "Article image"}
                                width={1000}
                                height={600}
                                className="aspect-3/2 w-full object-cover"
                                quality={ImageQuality.MEDIUM}
                            />
                        </div>
                    )}
                    <div className="[&_img]:m-0 [&_p]:text-sm [&_p]:leading-[1.3] [&_ul,&_ol]:ml-5">
                        <PostContentRenderer nodeContent={description} />
                    </div>
                </article>
            </div>
        );
    }

    return (
        <div className={cn("my-10", widgetAlign[variant])}>
            <article className="bg-client-light-gray border-y border-y-neutral-200 p-7.5 xl:-mx-7.5">
                {!!media.length && (
                    <div className="mb-7 last:mb-0">
                        <Image
                            src={media[0].url}
                            alt={media[0].alt || "artikelbillede"}
                            width={1000}
                            height={600}
                            className="aspect-3/2 w-full object-cover"
                            quality={ImageQuality.MEDIUM}
                        />
                    </div>
                )}
                {!!title && (
                    <div className="before:bg-client-red relative mb-7 before:absolute before:top-0 before:-left-7.5 before:h-full before:w-px last:mb-0 xl:before:-left-[31px]">
                        <h5 className="text-primary font-sans text-[26px] leading-[1.1] font-bold">{title}</h5>
                    </div>
                )}
                <div>
                    <PostContentRenderer nodeContent={description} />
                </div>
            </article>
        </div>
    );
}