"use client"
import React, { useEffect, useState } from 'react'

interface Trade {
  id: string
  symbol: string
  side: string
  amount: number
  price: number
  status: string
  executedAt: string
}

export default function TradingHistory() {
  const [trades, setTrades] = useState<Trade[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    async function fetchTrades() {
      const res = await fetch('/api/trading-history')
      if (res.ok) {
        setTrades(await res.json())
      }
      setLoading(false)
    }
    fetchTrades()
  }, [])

  return (
    <div className="p-4 border rounded bg-gray-900">
      <h2 className="text-lg font-bold mb-2">Trading History</h2>
      {loading ? <div>Loading...</div> : (
        <table className="w-full text-sm">
          <thead>
            <tr>
              <th>Symbol</th>
              <th>Side</th>
              <th>Amount</th>
              <th>Price</th>
              <th>Status</th>
              <th>Executed At</th>
            </tr>
          </thead>
          <tbody>
            {trades.map(trade => (
              <tr key={trade.id}>
                <td>{trade.symbol}</td>
                <td>{trade.side}</td>
                <td>{trade.amount}</td>
                <td>{trade.price}</td>
                <td>{trade.status}</td>
                <td>{trade.executedAt}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  )
}