import { CardPropertyData } from "@/schema/property";
import { formatCurrency } from "@/utils/general";
import Image from "next/image";

type CardPropertyProps = {
  data: CardPropertyData;
};

export default function CardProperty({ data }: CardPropertyProps) {
  const href = data?.propertyType === "rent" ? `/property/${data.slug}` : `/property/${data.slug}`;
  return (
    <div>
      <article className="product-classic">
        <div className="product-classic-media">
          <div
            className="owl-carousel"
            data-items="1"
            data-nav="true"
            data-stage-padding="0"
            data-loop="false"
            data-margin="0"
            data-mouse-drag="false"
          >
            {Array.isArray(data.images) &&
              data.images.map((img, idx) => (
                <div key={idx} className="w-full h-52 bg-colorImgPlaceholder/90">
                  <Image src={img.url} alt={img.alt ?? ""} fill className="object-cover" />
                </div>
              ))}
          </div>
          <div className="product-classic-price bg-colorPriceTag/90!">
            <span>
              {formatCurrency(data.price)}
              {data.propertyType === "rent" && `/mo`}
            </span>
          </div>
        </div>
        <h4 className="product-classic-title">
          <a href={href}>{data.title}</a>
        </h4>
        <div className="product-classic-divider"></div>
        <ul className="product-classic-list">
          {!!data.area && (
            <li>
              <span className="icon mdi mdi-vector-square"></span>
              <span>{data.area} Sq Ft</span>
            </li>
          )}
          {!!data.bathrooms_count && (
            <li>
              <span className="icon hotel-icon-10"></span>
              <span>{data.bathrooms_count} Bathrooms</span>
            </li>
          )}
          {!!data.bedrooms_count && (
            <li>
              <span className="icon hotel-icon-05"></span>
              <span>{data.bedrooms_count} Bedrooms</span>
            </li>
          )}
        </ul>
      </article>
    </div>
  );
}
