sapiens-web3/client/src/components/AuctionCard.tsx

import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import type { Auction } from "@shared/schema";

interface AuctionCardProps {
  auction: Auction;
}

export default function AuctionCard({ auction }: AuctionCardProps) {
  const formatPrice = (price: string) => {
    const num = parseFloat(price);
    return `$${num.toLocaleString()}`;
  };

  const getTimeRemaining = (endDate: string | Date) => {
    const end = new Date(endDate);
    const now = new Date();
    const diff = end.getTime() - now.getTime();
    
    if (diff <= 0) return "Ended";
    
    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    
    if (days > 0) return `${days}d ${hours}h`;
    if (hours > 0) return `${hours}h ${minutes}m`;
    return `${minutes}m`;
  };

  const getStatusBadge = () => {
    const timeRemaining = getTimeRemaining(auction.endDate);
    if (timeRemaining === "Ended") return { text: "Ended", variant: "secondary" as const };
    
    const end = new Date(auction.endDate);
    const now = new Date();
    const hoursLeft = (end.getTime() - now.getTime()) / (1000 * 60 * 60);
    
    if (hoursLeft <= 3) return { text: "Ending Soon", variant: "destructive" as const };
    return { text: "Active", variant: "default" as const };
  };

  const status = getStatusBadge();

  return (
    <Card data-testid={`card-auction-${auction.id}`}>
      <CardContent className="p-6">
        <div className="flex items-start justify-between mb-4">
          <div>
            <h3 className="font-semibold text-lg">{auction.title}</h3>
            <p className="text-sm text-muted-foreground">{auction.description}</p>
          </div>
          <Badge variant={status.variant}>{status.text}</Badge>
        </div>
        
        <div className="space-y-3">
          <div className="flex justify-between">
            <span className="text-sm text-muted-foreground">Current Bid:</span>
            <span className="font-semibold">{formatPrice(auction.currentBid || "0")}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-sm text-muted-foreground">Quality Score:</span>
            <span className="font-semibold text-chart-2">{auction.qualityScore || 0}/100</span>
          </div>
          <div className="flex justify-between">
            <span className="text-sm text-muted-foreground">Time Remaining:</span>
            <span className={`font-semibold ${status.variant === 'destructive' ? 'text-destructive' : ''}`}>
              {getTimeRemaining(auction.endDate)}
            </span>
          </div>
        </div>
        
        <Button 
          className="w-full mt-4" 
          disabled={getTimeRemaining(auction.endDate) === "Ended"}
          data-testid={`button-bid-${auction.id}`}
        >
          {getTimeRemaining(auction.endDate) === "Ended" ? "Auction Ended" : "Place Bid"}
        </Button>
      </CardContent>
    </Card>
  );
}