export default function BridgeStatus() {
  // In production, this would fetch status from contracts/API
  const statuses = [
    { id: 1, status: 'Pending', amount: '1.5 ETH', recipient: '0x1234...5678' },
    { id: 2, status: 'Finalized', amount: '2.0 ETH', recipient: '0xabcd...efgh' },
  ]

  return (
    <div className="p-6 bg-white rounded-lg shadow">
      <h2 className="text-2xl font-bold mb-4">Bridge Status</h2>
      <div className="space-y-2">
        {statuses.map((item) => (
          <div key={item.id} className="p-3 border rounded">
            <div className="flex justify-between">
              <span className="font-medium">{item.amount}</span>
              <span className={`px-2 py-1 rounded text-sm ${
                item.status === 'Finalized' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'
              }`}>
                {item.status}
              </span>
            </div>
            <div className="text-sm text-gray-600 mt-1">{item.recipient}</div>
          </div>
        ))}
      </div>
    </div>
  )
}

