<script setup lang="ts">
const invoices = [
  {
    invoice: 'INV001',
    paymentStatus: 'Paid',
    totalAmount: '$250.00',
    paymentMethod: 'Credit Card',
  },
  {
    invoice: 'INV002',
    paymentStatus: 'Pending',
    totalAmount: '$150.00',
    paymentMethod: 'PayPal',
  },
  {
    invoice: 'INV003',
    paymentStatus: 'Unpaid',
    totalAmount: '$350.00',
    paymentMethod: 'Bank Transfer',
  },
  {
    invoice: 'INV004',
    paymentStatus: 'Paid',
    totalAmount: '$450.00',
    paymentMethod: 'Credit Card',
  },
  {
    invoice: 'INV005',
    paymentStatus: 'Paid',
    totalAmount: '$550.00',
    paymentMethod: 'PayPal',
  },
  {
    invoice: 'INV006',
    paymentStatus: 'Pending',
    totalAmount: '$200.00',
    paymentMethod: 'Bank Transfer',
  },
  {
    invoice: 'INV007',
    paymentStatus: 'Unpaid',
    totalAmount: '$300.00',
    paymentMethod: 'Credit Card',
  },
]
</script>

<template>
  <FrameV1 title="重点区域监控">
    <div class="flex justify-around">
      <FrameImg src="/social-card.png" title="测试测试士大夫" icon="solar:adhesive-plaster-line-duotone" class="h-[90px]" />
      <FrameImg src="/social-card.png" title="测试测试士大夫" icon="solar:adhesive-plaster-line-duotone" class="h-[90px]" />
    </div>

    <Table class="mt-6">
      <TableHeader class=" bg-white/5">
        <TableRow>
          <TableHead class="w-[100px] h-8">
            Invoice
          </TableHead>
          <TableHead class="h-8 ">
            Status
          </TableHead>
          <TableHead class="h-8 ">
            Method
          </TableHead>
          <TableHead class="h-8 text-right">
            Amount
          </TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell class="font-medium">
            INV001
          </TableCell>
          <TableCell>Paid</TableCell>
          <TableCell>Credit Card</TableCell>
          <TableCell class="text-right">
            $250.00
          </TableCell>
        </TableRow>
        <TableRow class="bg-red-500/20 hover:bg-red-500/25">
          <TableCell class="font-medium">
            INV001
          </TableCell>
          <TableCell>Paid</TableCell>
          <TableCell>Credit Card</TableCell>
          <TableCell class="text-right">
            $250.00
          </TableCell>
        </TableRow>
      </TableBody>
    </Table>
  </FrameV1>
</template>
