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

const ProjectItem = ({ data }: { data: ArticleList[number] }) => {
    return (
        <article className="relative flex h-full flex-col bg-neutral-100">
            <Image
                src={data.preview?.url || ""}
                width={400}
                height={300}
                alt={data.title || ""}
                className="size-full object-cover sm:aspect-3/2 sm:max-h-40"
                quality={ImageQuality.LOW}
            />
            <div className="flex h-full flex-col p-3">
                {data.city.name && (
                    <span className="label-text inline-block max-w-50 leading-none uppercase">
                        <svg
                            id="map-pin"
                            className="fill-client-red mr-0.5 mb-0.5 inline size-3"
                            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>{data.city.name}</span>
                    </span>
                )}
                <h5 className="mt-3 mb-5 text-[26px] leading-[1.1] font-semibold">
                    <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 className="mt-auto flex flex-col gap-2">
                    {data.project?.type && (
                        <span className="text-sm leading-none font-medium text-neutral-800">
                            <Building className="mr-1 inline size-5 stroke-neutral-800 align-sub" />
                            <span>{data.project.type}</span>
                        </span>
                    )}
                    {data.project?.status && (
                        <span className="text-sm leading-none font-medium text-neutral-800">
                            <Clock className="mr-1 inline size-5 stroke-neutral-800 align-sub" />
                            <span>{data.project.status}</span>
                        </span>
                    )}
                </div>
            </div>
        </article>
    );
};

export default ProjectItem;