PropertyListingCard

import { Badge } from "@giddaa-housing/ui/badge";
import {
  PropertyListingCard,
  PropertyListingCardActionButton,
  PropertyListingCardActionButtonLink,
  PropertyListingCardActions,
  PropertyListingCardBadges,
  PropertyListingCardCarousel,
  PropertyListingCardCarouselIndicator,
  PropertyListingCardCarouselItem,
  PropertyListingCardCarouselNext,
  PropertyListingCardCarouselPrevious,
  PropertyListingCardDetails,
  PropertyListingCardImage,
  PropertyListingCardImagePlaceholder,
  PropertyListingCardMedia,
  PropertyListingCardMediaTop,
  PropertyListingCardOptionsBar,
  PropertyListingCardOverview,
  PropertyListingCardTitle,
} from "@giddaa-housing/ui/property-listing-card";
import { CarouselContent } from "@giddaa-housing/ui/carousel";
import { Match } from "@giddaa-housing/ui/match";
import { PriceTag } from "@giddaa-housing/ui/price-tag";
import { Link } from "@tanstack/react-router";

<PropertyListingCard>
  <PropertyListingCardMedia>
    <PropertyListingCardCarousel>
      <CarouselContent>
        {images.map((image, index) => (
          <PropertyListingCardCarouselItem key={image.id}>
            <PropertyListingCardImage
              src={image.src}
              alt={image.alt}
              loading={index === 0 ? "eager" : "lazy"}
            />
          </PropertyListingCardCarouselItem>
        ))}
      </CarouselContent>
      <PropertyListingCardCarouselIndicator className="bottom-28" />
    </PropertyListingCardCarousel>

    <PropertyListingCardMediaTop>
      <Match value={95} label="Match" variant="donut" />
      {/* Add play, close, share, or other overlay controls here. */}
    </PropertyListingCardMediaTop>
    <PriceTag className="absolute bottom-16 left-2 z-10" value="N78,650,000" />
    <PropertyListingCardOptionsBar
      render={
        <Link
          to="/listings/$listingId/purchase-options"
          params={{ listingId }}
        />
      }
    >
      7 options available to buy this house
    </PropertyListingCardOptionsBar>
  </PropertyListingCardMedia>

  <PropertyListingCardDetails>
    <PropertyListingCardTitle>Maitama, Abuja</PropertyListingCardTitle>
    <PropertyListingCardOverview>
      2 Bed • 3 Baths • Semi-Detached Bungalow
    </PropertyListingCardOverview>
    <PropertyListingCardBadges>
      <Badge variant="success" border={false} shape="box" size="sm">
        You Qualify to Buy
      </Badge>
    </PropertyListingCardBadges>
  </PropertyListingCardDetails>

  <PropertyListingCardActions>
    <PropertyListingCardActionButton>Message Us</PropertyListingCardActionButton>
    <PropertyListingCardActionButtonLink href="/listings/maitama">
      View Listing
    </PropertyListingCardActionButtonLink>
  </PropertyListingCardActions>
</PropertyListingCard>

<PropertyListingCardCarousel>
  <CarouselContent>
    {images.map((image) => (
      <PropertyListingCardCarouselItem key={image.id}>
        <Link
          to="/listings/$listingId"
          params={{ listingId }}
          className="block size-full"
          aria-label={`View listing: ${listingTitle}`}
        >
          <PropertyListingCardImage
            src={image.src}
            alt={image.alt}
            loading="lazy"
          />
        </Link>
      </PropertyListingCardCarouselItem>
    ))}
  </CarouselContent>
  <PropertyListingCardCarouselIndicator maxVisible={5} />
  <PropertyListingCardCarouselPrevious />
  <PropertyListingCardCarouselNext />
</PropertyListingCardCarousel>