Property Cards 02

"use client";

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

export interface Property {
  id: string;
  image: string;
  price: number;
  type: string;
  address: string;
  city: string;
  postcode: string;
  bedrooms: number;
  bathrooms: number;
  sqft: 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 className="bg-card overflow-hidden rounded-lg border">
      <div className="relative aspect-16/9 w-full overflow-hidden">
        <Image
          src={property.image}
          alt={`${property.address}, ${property.city}`}
          fill
          className="object-cover"
        />
        {/* Price Badge */}
        <Badge className="absolute top-4 right-4 rounded-full px-4 py-2 text-lg font-semibold">
          {formatPrice(property.price)}
        </Badge>
      </div>

      {/* Property Details */}
      <div className="space-y-4 p-6">
        <p className="text-muted-foreground text-sm">{property.type}</p>

        <h4 className="text-foreground text-xl leading-tight font-bold">
          {property.address}, {property.city} {property.postcode}
        </h4>

        {/* Features */}
        <div className="text-muted-foreground flex items-center gap-6">
          <div className="flex items-center gap-2">
            <Bed className="size-4" />
            <span className="text-sm">{property.bedrooms} Bed</span>
          </div>
          <div className="flex items-center gap-2">
            <Bath className="size-4" />
            <span className="text-sm">{property.bathrooms} Bath</span>
          </div>
          <div className="flex items-center gap-2">
            <Maximize className="size-4" />
            <span className="text-sm">{property.sqft.toLocaleString()} Sqft</span>
          </div>
        </div>

        {/* Actions */}
        <div className="flex items-center gap-3 pt-2">
          <Button variant="secondary" className="w-full flex-1">
            More Details
          </Button>
          <Button variant="outline" size="icon" className="rounded-full">
            <Heart />
            <span className="sr-only">Add to favorites</span>
          </Button>
        </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",
  price: 231599,
  type: "Apartment for sale",
  address: "1110/410 Elizabeth Street",
  city: "Melbourne VIC",
  postcode: "3000",
  bedrooms: 2,
  bathrooms: 1,
  sqft: 1440
};

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>
  );
}