import React, { useState, useEffect } from 'react';

function TradingDashboard() {
  const [prices, setPrices] = useState([]);

  useEffect(() => {
    fetch('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd')
      .then((response) => response.json())
      .then((data) => setPrices(data));
  }, []);

  return (
    <div style={{ padding: '20px' }}>
      <h1>Cryptocurrency Prices</h1>
      <table>
        <thead>
          <tr>
            <th>Coin</th>
            <th>Price (USD)</th>
          </tr>
        </thead>
        <tbody>
          {prices.map((coin) => (
            <tr key={coin.id}>
              <td>{coin.name}</td>
              <td>${coin.current_price}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default TradingDashboard;