import { Camera } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { ArticleList } from "@/features/posts/_lib/transformers";
import { ImageQuality } from "@/config/enums/image-quality";

export default function PhotoItem({ data, type }: { data: ArticleList[number]; type?: "default" | "large" }) {
    const isLarge = type === "large";

    if (isLarge) {
        return (
            <article className="border-t-client-orange relative size-full border-t bg-neutral-900 sm:max-lg:flex">
                {data.preview?.url && (
                    <Image
                        src={data.preview?.url}
                        alt={data.preview?.caption || "Artikel billede"}
                        width={1000}
                        height={600}
                        className="w-full shrink-0 grow object-cover sm:aspect-3/2 sm:max-lg:order-2 sm:max-lg:w-[calc(66%)]"
                        quality={ImageQuality.MEDIUM}
                    />
                )}
                <div className="grow p-2 sm:max-lg:order-1">
                    <div className="mb-3 flex justify-between">
                        <div className="flex gap-4">
                            <span className="label-text text-client-orange uppercase">
                                <Camera className="fill-client-orange mr-1 mb-0.5 inline size-5 stroke-neutral-900 stroke-[1]" />
                                {data.topic}
                            </span>
                        </div>
                    </div>
                    <h5 className="mt-3 mb-4 text-[26px] leading-[1.1] 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 }}
                        />
                    </h5>

                    {
                        <p className="mb-4 font-serif font-medium text-neutral-400">
                            {data.description.replaceAll("&shy;", "\u00AD")}
                        </p>
                    }
                </div>
            </article>
        );
    }

    return (
        <article className="border-t-client-orange relative size-full border-t bg-neutral-900">
            {data.preview?.url && (
                <Image
                    src={data.preview?.url}
                    alt={data.preview?.caption || "Artikel billede"}
                    width={1000}
                    height={600}
                    className="aspect-3/2 w-full object-cover"
                    quality={ImageQuality.LOW}
                />
            )}

            <div className="p-2">
                <div className="mb-3 flex justify-between">
                    <div className="flex gap-4">
                        <span className="label-text text-client-orange uppercase">
                            <Camera className="fill-client-orange mr-1 mb-0.5 inline size-5 stroke-neutral-900 stroke-[1]" />
                            {data.topic}
                        </span>
                    </div>
                </div>
                <h5 className="mt-3 mb-4 text-[26px] leading-[1.1] 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 }}
                    />
                </h5>
            </div>
        </article>
    );
}