wrongmove/frontend/src/components/PropertyCardCompact.tsx

import { Bed, MapPin } from 'lucide-react';
import type { PropertyProperties } from '@/types';

interface PropertyCardCompactProps {
    property: PropertyProperties;
    isActive?: boolean;
    isHighlighted?: boolean;
    avgPricePerSqm?: number;
    onClick?: () => void;
}

export function PropertyCardCompact({
    property,
    isActive = false,
    isHighlighted = false,
    avgPricePerSqm,
    onClick,
}: PropertyCardCompactProps) {
    const isGoodDeal = avgPricePerSqm && property.qmprice > 0 && property.qmprice < avgPricePerSqm * 0.9;
    const isExpensive = avgPricePerSqm && property.qmprice > avgPricePerSqm * 1.1;

    const priceIndicator = isGoodDeal
        ? { dotColor: 'bg-[var(--deal-good)]', label: 'Good deal' }
        : isExpensive
            ? { dotColor: 'bg-[var(--deal-above)]', label: 'Above avg' }
            : null;

    return (
        <div
            className={`w-[280px] shrink-0 snap-center rounded-lg border bg-card shadow-sm overflow-hidden cursor-pointer transition-shadow hover:shadow-md ${
                isActive ? 'ring-2 ring-primary scale-[1.02]' : ''
            } ${isHighlighted ? 'ring-2 ring-primary' : ''}`}
            onClick={onClick}
        >
            {/* Thumbnail with 4:3 aspect ratio */}
            <div className="aspect-[4/3] w-full bg-muted">
                {property.photo_thumbnail && (
                    <img
                        src={property.photo_thumbnail}
                        alt={`${property.rooms}-bed, £${property.total_price.toLocaleString()}`}
                        className="w-full h-full object-cover"
                    />
                )}
            </div>

            {/* Details */}
            <div className="p-3 space-y-1">
                {/* Price bold */}
                <div className="flex items-center gap-1.5">
                    <span className="font-bold text-base">
                        £{property.total_price.toLocaleString()}
                        {property.listing_type !== 'BUY' && (
                            <span className="text-muted-foreground font-normal text-sm">/mo</span>
                        )}
                    </span>
                    {priceIndicator && (
                        <span className={`w-2 h-2 rounded-full shrink-0 ${priceIndicator.dotColor}`} title={priceIndicator.label} />
                    )}
                </div>

                {/* Beds and size */}
                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                    <span className="flex items-center gap-1">
                        <Bed className="h-3.5 w-3.5" />
                        {property.rooms} bed
                    </span>
                    <span>·</span>
                    <span>{property.qm} m²</span>
                </div>

                {/* Location */}
                {property.city && (
                    <div className="flex items-center gap-1 text-xs text-muted-foreground truncate">
                        <MapPin className="h-3 w-3 shrink-0" />
                        {property.city}
                    </div>
                )}
            </div>
        </div>
    );
}