import { Share2 } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import PostTag from "@/components/shared/post-tag";
import { cn } from "@/lib/utils/cn";
import { ArticleList } from "@/features/posts/_lib/transformers";
import { ImageQuality } from "@/config/enums/image-quality";
import { TopicsEnum } from "@/config/enums";

type ArticleProps = {
    article: ArticleList[number];
    titleClass?: string | null | boolean;
    hideShares?: boolean;
    hideDesc?: boolean;
};

export default function CityMainItem({ article, titleClass, hideShares = false, hideDesc = false }: ArticleProps) {
    const isCityLife = article?.topic === TopicsEnum.CITY_LIFE;
    return (
        <article className="relative">
            <div className="relative grow sm:max-lg:flex sm:max-lg:gap-4">
                {article.preview?.url && (
                    <Image
                        src={article.preview?.url}
                        alt={article.preview?.caption || "Article image"}
                        width={1000}
                        height={600}
                        className="w-full object-cover sm:aspect-3/2 sm:max-lg:max-w-[60%]"
                        quality={ImageQuality.LOW}
                    />
                )}
                <div className="mb-4 grow">
                    <div className="flex justify-between gap-x-2">
                        {article.city.name && (
                            <Link
                                className="label-text relative z-10 mt-3 mb-5 text-neutral-500 uppercase"
                                href={article.city.url}
                            >
                                <svg
                                    id="map-pin"
                                    className={cn(
                                        "fill-client-red mr-0.5 mb-0.5 inline size-3",
                                        isCityLife && "fill-client-orange"
                                    )}
                                    width="64.615px"
                                    height="96.922px"
                                    viewBox="0 0 64.615 96.922"
                                >
                                    <path
                                        d="M62.532,43.603L39.564,92.442c-1.325,2.776-4.228,4.48-7.257,4.48s-5.931-1.704-7.193-4.48L2.083,43.603
		C0.442,40.132,0,36.156,0,32.307C0,14.45,14.45,0,32.307,0c17.857,0,32.308,14.45,32.308,32.307
		C64.615,36.156,64.173,40.132,62.532,43.603z M32.307,16.154c-8.896,0-16.153,7.257-16.153,16.153
		c0,8.897,7.257,16.154,16.153,16.154c8.897,0,16.154-7.257,16.154-16.154C48.461,23.411,41.204,16.154,32.307,16.154z"
                                    />
                                </svg>
                                <span className="before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full hover:underline">
                                    {article.city.name}
                                </span>
                            </Link>
                        )}
                        {!hideShares && (
                            <div className="ml-auto flex h-fit min-w-10 flex-col items-center gap-1.5 bg-neutral-300 px-1 pt-2 pb-1">
                                <Share2 className="fill-client-red stroke-client-red size-4" />
                                <span className="font-serif text-sm text-white">{article.stats.shares}</span>
                            </div>
                        )}
                    </div>
                    <PostTag data={article.primaryTag} />
                    <h5 className={cn("mb-4 text-[26px] leading-none font-semibold", titleClass)}>
                        <Link
                            href={article.url}
                            className="before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full hover:underline"
                            dangerouslySetInnerHTML={{ __html: article.title }}
                        />
                    </h5>
                    {!!article.description && !hideDesc && (
                        <p className="text-neutral-600">{article.description.replaceAll("&shy;", "\u00AD")}</p>
                    )}
                </div>
            </div>
        </article>
    );
}