"use client";

import { useLatestPropertyQuery } from "@/services/hooks/property";
import { formatCurrency } from "@/utils/general";
import Image from "next/image";
import { useEffect } from "react";

export default function ListOfFeaturedProperiesFooter() {
  const { data, _fetch } = useLatestPropertyQuery();

  useEffect(() => {
    _fetch();
  }, []);

  const latestProperties = data ? data.slice(0, 2) : [];

  return (
    <>
      {latestProperties.length > 0 &&
        latestProperties.map((property, index) => (
          <a key={index} className="post-minimal" href={`single-property/${property.slug}`}>
            <div className="post-minimal-image">
              <Image src={property.images?.[0]?.url ?? ""} alt={property.title} width={161} height={136} />
            </div>
            <div className="post-minimal-body">
              <div className="post-minimal-title">
                <span className="text-colorFooterText! hover:text-colorFooterTextHover!">{property.title}</span>
              </div>
              <div className="post-minimal-text">
                <span>From {formatCurrency(property.price)}/month</span>
              </div>
            </div>
          </a>
        ))}
    </>
  );
}
