Property Cards 03

"use client";

import { Button } from "@/components/ui/button";
import { Heart, Bed, Bath, Maximize } from "lucide-react";
import Image from "next/image";

export interface Property {
  id: string;
  image: string;
  name: string;
  location: string;
  price: number;
  bedrooms: number;
  bathrooms: number;
  area: number;
}

interface PropertyCardProps {
  property: Property;
}

export function PropertyCard({ property }: PropertyCardProps) {
  const formatPrice = (price: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
      minimumFractionDigits: 0,
      maximumFractionDigits: 0
    }).format(price);
  };

  return (
    <div>
      <div className="relative aspect-4/3 w-full overflow-hidden">
        <Image src={property.image} alt={property.name} fill className="rounded-lg object-cover" />
        <Button
          variant="outline"
          size="icon-lg"
          className="absolute top-4 right-4 rounded-full"
          aria-label="Add to favorites">
          <Heart />
        </Button>
      </div>

      {/* Property Details */}
      <div className="space-y-4 py-4">
        <div className="flex items-start justify-between gap-4">
          <div className="flex-1 space-y-1">
            <h2 className="text-foreground text-xl leading-tight font-bold">{property.name}</h2>
            <p className="text-muted-foreground text-sm">{property.location}</p>
          </div>
          <div className="text-lg whitespace-nowrap">{formatPrice(property.price)}</div>
        </div>

        <div className="flex flex-wrap items-center gap-2">
          <div className="border-border bg-background flex items-center gap-2 rounded-full border px-4 py-2">
            <Bed className="text-muted-foreground size-4" />
            <span className="text-sm">{property.bedrooms}</span>
          </div>
          <div className="border-border bg-background flex items-center gap-2 rounded-full border px-4 py-2">
            <Bath className="text-muted-foreground size-4" />
            <span className="text-sm">{property.bathrooms}</span>
          </div>
          <div className="border-border bg-background flex items-center gap-2 rounded-full border px-4 py-2">
            <Maximize className="text-muted-foreground size-4" />
            <span className="text-sm">{property.area} m²</span>
          </div>
        </div>
      </div>
    </div>
  );
}

import { PropertyCard } from "./components/property-card";

const property = {
  id: "1",
  image:
    "https://images.unsplash.com/photo-1512917774080-9991f1c4c750?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=500",
  name: "Emerald Bay Residences",
  location: "Gunungkidul, Yogyakarta",
  price: 250000,
  bedrooms: 8,
  bathrooms: 2.5,
  area: 410
};

export default function Home() {
  return (
    <div className="mx-auto space-y-6 px-4 py-10 sm:w-[400px]">
      <PropertyCard key={property.id} property={property} />
    </div>
  );
}