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

interface PredictionMarketCardProps {
  market: PredictionMarket;
}

export default function PredictionMarketCard({ market }: PredictionMarketCardProps) {
  const formatVolume = (volume: string) => {
    const num = parseFloat(volume);
    if (num >= 1000000) return `$${(num / 1000000).toFixed(1)}M`;
    if (num >= 1000) return `$${(num / 1000).toFixed(0)}K`;
    return `$${num}`;
  };

  const formatDate = (date: string | Date) => {
    return new Date(date).toLocaleDateString();
  };

  const yesPrice = parseFloat(market.yesPrice || "0");
  const noPrice = parseFloat(market.noPrice || "0");

  return (
    <Card className="prediction-card" data-testid={`card-prediction-${market.id}`}>
      <CardContent className="p-4">
        <div className="flex items-center justify-between mb-3">
          <h4 className="font-semibold text-sm line-clamp-2">{market.title}</h4>
          <span className="text-sm text-chart-2 font-semibold ml-2">
            {yesPrice}% Yes
          </span>
        </div>
        <div className="flex items-center justify-between text-sm text-muted-foreground mb-3">
          <span>Volume: {formatVolume(market.volume || "0")}</span>
          <span>Ends: {formatDate(market.endDate!)}</span>
        </div>
        <div className="flex space-x-2">
          <Button 
            size="sm" 
            className="bg-chart-2 hover:bg-chart-2/90 text-white"
            data-testid={`button-buy-yes-${market.id}`}
          >
            Buy Yes @ {yesPrice}¢
          </Button>
          <Button 
            size="sm" 
            className="bg-chart-1 hover:bg-chart-1/90 text-white"
            data-testid={`button-buy-no-${market.id}`}
          >
            Buy No @ {noPrice}¢
          </Button>
          <Button 
            size="sm" 
            variant="outline"
            data-testid={`button-view-nostra-${market.id}`}
          >
            View on Nostra
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}
