<template>
  <div class="p-8">
    <ToastContainer />
    
    <div class="flex justify-between items-center mb-6">
      <h1 class="text-3xl font-bold">Payment Management</h1>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
      <div class="bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl p-6 text-white">
        <div class="text-sm opacity-90">Total Revenue</div>
        <div class="text-3xl font-bold mt-2">Rs 0</div>
      </div>
      <div class="bg-gradient-to-br from-blue-500 to-cyan-600 rounded-xl p-6 text-white">
        <div class="text-sm opacity-90">Pending Payouts</div>
        <div class="text-3xl font-bold mt-2">Rs 0</div>
      </div>
      <div class="bg-gradient-to-br from-purple-500 to-pink-600 rounded-xl p-6 text-white">
        <div class="text-sm opacity-90">Commission Earned</div>
        <div class="text-3xl font-bold mt-2">Rs 0</div>
      </div>
    </div>

    <div class="bg-white rounded-lg shadow overflow-x-auto">
      <table class="w-full">
        <thead class="bg-gray-50">
          <tr>
            <th class="px-6 py-3 text-left">Transaction ID</th>
            <th class="px-6 py-3 text-left">Order #</th>
            <th class="px-6 py-3 text-left">Amount</th>
            <th class="px-6 py-3 text-left">Method</th>
            <th class="px-6 py-3 text-left">Status</th>
            <th class="px-6 py-3 text-left">Date</th>
          </tr>
        </thead>
        <tbody>
          <tr class="border-t">
            <td colspan="6" class="px-6 py-8 text-center text-gray-500">No payments yet</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useToast } from '../../composables/useToast';
import ToastContainer from '../../components/ToastContainer.vue';

const { success, error } = useToast();
</script>
