"use client";

import Link from "next/link";
import { ImageParallax } from "../effects/ImageParallax";

export interface FeaturedPropertyCardProps {
  image: string;
  hoverImage?: string;
  title: string;
  category: string;
  address: string;
}

const FeaturedPropertyCard = ({
  image,
  hoverImage,
  title,
  category,
  address,
}: FeaturedPropertyCardProps) => {
  return (
    <Link href="/property-details" className="">
      <div className="relative w-full xl:w-10/12 2xl:min-[1921px]:w-full  aspect-[3/4] group overflow-hidden cursor-pointer">
        <ImageParallax
          start="top 90%"
          end="bottom 30%"
          speed={0.2}
          direction="up"
          height={400}
          width={300}
          src={image}
          alt={title}
          containerClassName="w-full h-full object-cover transition-opacity duration-[1500ms] ease-in-out group-hover:opacity-0"
        />
        {/* Night image (hover image) */}
        {hoverImage && (
          <ImageParallax
            start="top 90%"
            end="bottom 30%"
            speed={0.2}
            direction="up"
            height={400}
            width={300}
            src={hoverImage}
            alt={`${title} - Night view`}
            containerClassName="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-sm sm:text-base md:text-[18px] font-light tracking-[0.25em] sm:tracking-[0.38em] leading-[110%] uppercase absolute top-20 sm:top-28 md:top-32 -right-8 sm:-right-10 md:-right-14 rotate-270 group-hover:scale-[1.1] transition-all duration-1000">
          {category}
        </h3>
      </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">
          {title}
        </h3>
        <span className="inline-flex items-center">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src="/icons/map_pin.svg"
            alt="map pin"
            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">
            {address}
          </p>
        </span>
      </div>
    </Link>
  );
};

export default FeaturedPropertyCard;