"use client";

import Link from "next/link";

export interface ProjectWithinCardProps {
  image: string;
  hoverImage?: string;
  title: string;
  status: string;
  /** When using Strapi: pass resolved URL from API, e.g. statusIcon = project.statusIcon?.url ? getStrapiImageUrl(project.statusIcon.url) : undefined. Fallback: /icons/projects/updates.svg */
  statusIcon?: string;
  slug?: string;
  propertyType?: string;
}

const PROJECTS_STATUS_ICON_FALLBACK = "/icons/projects/updates-gray.svg";

const ProjectWithinCard = ({
  image,
  hoverImage,
  title,
  status,
  statusIcon,
  slug,
  propertyType,
}: ProjectWithinCardProps) => {
  const statusIconSrc = statusIcon ?? PROJECTS_STATUS_ICON_FALLBACK;
  const href =
    slug && propertyType
      ? `/properties/${propertyType}/${slug}`
      : "#";

  return (
    <Link href={href} className="block w-full max-w-[400px]">
      <div className="relative w-full aspect-3/4 md:aspect-4/5 group overflow-hidden cursor-pointer">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src={image}
          alt={title}
          className="absolute inset-0 w-full h-full object-cover transition-opacity duration-1500 ease-in-out group-hover:opacity-0"
        />
        {hoverImage && (
          /* eslint-disable-next-line @next/next/no-img-element */
          <img
            src={hoverImage}
            alt={`${title} - Night view`}
            className="absolute inset-0 w-full h-full object-cover opacity-0 transition-opacity duration-1500 ease-in-out group-hover:opacity-100"
          />
        )}
        <div className="bg-black/25 absolute inset-0" />
      </div>
      <div className="pt-5 sm:pt-6 md:pt-7">
        <h3 className="text-[#333333] font-creato font-normal text-base sm:text-lg md:text-[20px] md:leading-snug tracking-wider md:tracking-widest mb-1.5 sm:mb-2 uppercase">
          {title}
        </h3>
        <span className="inline-flex items-center">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={statusIconSrc}
            alt=""
            className="mr-1.5 sm:mr-2 invert opacity-30 w-4 h-4 sm:w-[18px] sm:h-[18px]"
          />
          <p className="text-[#888888] font-creato font-normal text-sm sm:text-[15px] leading-1 tracking-wider sm:tracking-widest pt-0.5">
            {status}
          </p>
        </span>
      </div>
    </Link>
  );
};

export default ProjectWithinCard;