'use client'
import React from 'react'
import TradeExecutionPanel from '../../components/TradeExecutionPanel.js'
import PositionsPanel from '../../components/PositionsPanel.js'
import PendingOrdersPanel from '../../components/PendingOrdersPanel.js'
import TradesHistoryPanel from '../../components/TradesHistoryPanel.js'
import SimpleChart from '../../components/SimpleChart'

export default function TradingPage() {
  return (
    <div className="space-y-8">
      {/* Trading Chart - Full Width */}
      <div className="bg-gray-900 rounded-lg p-6">
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-xl font-semibold text-white">SOL/USDC</h2>
          <div className="flex items-center space-x-4 text-sm text-gray-400">
            <span>1M</span>
            <span>5M</span>
            <span className="text-blue-400">15M</span>
            <span>1H</span>
            <span>4H</span>
            <span>1D</span>
          </div>
        </div>
        <SimpleChart symbol="SOL/USDC" positions={[]} />
      </div>

      <div className="grid grid-cols-1 xl:grid-cols-2 gap-8">
        <div className="space-y-6">
          <TradeExecutionPanel />
        </div>
        
        <div className="space-y-6">
          {/* Open Positions */}
          <PositionsPanel />

          {/* Pending Orders */}
          <PendingOrdersPanel />
          
          {/* Recent Trades */}
          <TradesHistoryPanel />
        </div>
      </div>
    </div>
  )
}