import { Link } from 'react-router-dom'
import type { Bet } from '@/types'
import { Card } from '@/components/common/Card'
import { formatCurrency, formatRelativeTime } from '@/utils/formatters'
import { BET_CATEGORIES, BET_STATUS_COLORS } from '@/utils/constants'
import { Calendar, DollarSign, TrendingUp } from 'lucide-react'
import { BlockchainBadgeCompact } from '@/blockchain/components/BlockchainBadge'

interface BetCardProps {
  bet: Bet
}

export const BetCard = ({ bet }: BetCardProps) => {
  return (
    <Link to={`/bets/${bet.id}`}>
      <Card className="hover:shadow-lg transition-shadow cursor-pointer">
        <div className="space-y-3">
          <div className="flex items-start justify-between">
            <h3 className="text-lg font-semibold text-gray-900">{bet.title}</h3>
            <div className="flex items-center gap-2">
              <span className={`px-2 py-1 rounded text-xs font-medium ${BET_STATUS_COLORS[bet.status]}`}>
                {bet.status}
              </span>
              {bet.blockchain_tx_hash && (
                <BlockchainBadgeCompact
                  status="confirmed"
                  txHash={bet.blockchain_tx_hash}
                />
              )}
            </div>
          </div>

          <p className="text-sm text-gray-600 line-clamp-2">{bet.description}</p>

          <div className="flex items-center gap-4 text-sm text-gray-500">
            <div className="flex items-center gap-1">
              <Calendar size={16} />
              <span>{bet.event_name}</span>
            </div>
            <span className="px-2 py-0.5 bg-gray-100 rounded text-xs">
              {BET_CATEGORIES[bet.category]}
            </span>
          </div>

          <div className="pt-3 border-t space-y-2">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2 text-primary font-semibold">
                <DollarSign size={18} />
                {formatCurrency(bet.stake_amount)}
              </div>
              <div className="flex items-center gap-2 text-sm text-gray-600">
                <TrendingUp size={16} />
                <span>{bet.creator_odds}x / {bet.opponent_odds}x</span>
              </div>
            </div>

            <div className="flex items-center justify-between text-sm">
              <span className="text-gray-600">Created by {bet.creator.display_name || bet.creator.username}</span>
              <span className="text-gray-500">{formatRelativeTime(bet.created_at)}</span>
            </div>
          </div>
        </div>
      </Card>
    </Link>
  )
}
