import Link from "next/link";
import React from "react";

interface FeaturedPropertyCardProps {
  image: string;
  hoverImage?: string;
  title: string;
  category: string;
  address: string;
  size?: number;
  status?: string;
}

const PropertyResultCard = ({
  image,
  hoverImage,
  title,
  category,
  address,
  size,
  status,
}: FeaturedPropertyCardProps) => {
  return (
    <div className="">
      <Link href={"/property-details"}>
        <div className="relative w-full aspect-[3/4] group overflow-hidden cursor-pointer">
          {/* Day image (base image) */}
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={image}
            alt={title}
            className="w-full h-full object-cover transition-opacity duration-[1500ms] ease-in-out group-hover:opacity-0"
          />
          {/* Night image (hover image) */}
          {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-[1500ms] ease-in-out group-hover:opacity-100"
            />
          )}
          <div className="bg-black/25 absolute w-full h-full top-0 left-0"></div>
          <h3 className="font-creato text-white text-[18px] font-light tracking-[0.38em] leading-[110%] uppercase absolute top-32 -right-14 rotate-270 group-hover:scale-[1.1] transition-all duration-1000">
            {category}
          </h3>
        </div>
      </Link>
      <div className="pt-5 md:pt-8">
        <Link href={"/property-details"}>
          <h3 className="text-[#333333] font-creato font-medium text-[14px] md:text-[18px] xl:text-[26px] leading-2 tracking-widest mb-5">
            {title}
          </h3>
        </Link>
        {/* icon + information block */}
        <div>
          <div className="inline-flex md:items-center lg:items-start mb-3">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src="/icons/map_pin.svg"
              alt="map pin"
              className="mr-2 invert opacity-20 w-[18px] h-[18px]"
            />
            <p className="text-[#888888] font-creato font-normal leading-relaxed tracking-widest xl:tracking-widest text-[14px] -mt-0.5 md:-mt-0 lg:-mt-0.5">
              {address}
            </p>
          </div>
        </div>

        <div>
          <div className="inline-flex items-center mb-3">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src="/icons/stairs.svg"
              alt="map pin"
              className="mr-2 invert opacity-50 w-[14px] h-[14px]"
            />
            <p className="text-[#888888] font-creato font-normal text-[14px] leading-1 tracking-widest pt-0.5">
              Unit Size: {size} sq ft
            </p>
          </div>
        </div>

        <div>
          <div className="inline-flex items-center mb-3">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src="/icons/status.svg"
              alt="map pin"
              className="mr-2 invert opacity-70 w-[14px] h-[14px]"
            />
            <p className="text-[#888888] font-creato font-normal text-[14px] leading-1 tracking-widest pt-0.5">
              Present Status : {status}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default PropertyResultCard;