wrongmove/frontend/src/components/PropertyCardCompact.tsx

import { Bed, Maximize2 } 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
        ? { color: 'text-green-600 bg-green-50', label: 'Good deal' }
        : isExpensive
            ? { color: 'text-red-600 bg-red-50', label: 'Above avg' }
            : null;

    return (
        <div
            className={`w-[280px] shrink-0 snap-center rounded-lg border bg-background shadow-sm overflow-hidden cursor-pointer transition-all ${
                isActive ? 'ring-2 ring-primary scale-[1.02]' : ''
            } ${isHighlighted ? 'ring-2 ring-primary' : ''}`}
            onClick={onClick}
        >
            {/* Thumbnail */}
            <div className="h-28 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">
                <div className="flex items-start justify-between gap-2">
                    <div className="font-semibold text-base">
                        £{property.total_price.toLocaleString()}
                        {property.listing_type !== 'BUY' && (
                            <span className="text-muted-foreground font-normal text-sm">/mo</span>
                        )}
                    </div>
                    {priceIndicator && (
                        <span className={`text-xs px-1.5 py-0.5 rounded shrink-0 ${priceIndicator.color}`}>
                            {priceIndicator.label}
                        </span>
                    )}
                </div>

                <div className="flex items-center gap-3 mt-1.5 text-sm text-muted-foreground">
                    <span className="flex items-center gap-1">
                        <Bed className="h-3.5 w-3.5" />
                        {property.rooms}
                    </span>
                    <span className="flex items-center gap-1">
                        <Maximize2 className="h-3.5 w-3.5" />
                        {property.qm} m²
                    </span>
                    <span>£{property.qmprice}/m²</span>
                </div>
            </div>
        </div>
    );
}