<template>
  <div class="space-y-2">
    <div
      v-for="invoice in invoices"
      :key="invoice.id"
      class="flex items-center justify-between rounded-lg bg-surface-gray-1 px-4 py-3"
    >
      <div class="flex items-center gap-4">
        <div>
          <p class="font-medium text-ink-gray-9">{{ invoice.id }}</p>
          <p class="text-sm text-ink-gray-5">{{ invoice.date }}</p>
        </div>
      </div>
      <div class="flex items-center gap-4">
        <span class="font-medium text-ink-gray-9">{{ invoice.amount }}</span>
        <Badge
          :variant="invoice.status === 'Paid' ? 'success' : 'warning'"
          :label="invoice.status"
        />
        <Button variant="ghost" size="sm">
          <FeatherIcon name="download" class="h-4 w-4" />
        </Button>
      </div>
    </div>

    <div v-if="!invoices.length" class="py-8 text-center text-ink-gray-5">
      No invoices yet
    </div>
  </div>
</template>

<script setup>
import { Badge, Button, FeatherIcon } from 'frappe-ui'

defineProps({
  invoices: {
    type: Array,
    default: () => [],
  },
})
</script>
