<template>
  <v-container class="trade-container">
    <v-row justify="center" align="center" class="trade-header">
      <h1 class="trade-title">Trading</h1>
    </v-row>

    <v-row justify="center" align="center" class="trade-content">
      <v-col cols="12" md="10" lg="8">
        <v-card class="trade-card">
          <v-card-title>Order Book</v-card-title>
          <v-card-text>
            <OrderBook />
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup lang="ts">
import OrderBook from '../components/OrderBook.vue'
</script>

<style scoped>
.trade-container {
  padding: 40px 20px;
  min-height: 100vh;
}

.trade-header {
  margin-bottom: 40px;
}

.trade-title {
  font-size: 2rem;
  font-weight: bold;
  color: #0066cc;
  margin: 0;
}

.trade-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style>
