<template>
  <div>
    <h1 class="text-h4 mb-4">Reports</h1>
    <v-row>
      <v-col v-for="report in reports" :key="report.title" cols="12" md="6">
        <v-card>
          <v-card-title><v-icon class="mr-2">{{ report.icon }}</v-icon>{{ report.title }}</v-card-title>
          <v-card-text>{{ report.description }}</v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </div>
</template>

<script setup lang="ts">
const reports = [
  { title: 'Spending by Category', icon: 'mdi-chart-pie', description: 'See where your money goes by category' },
  { title: 'Income vs Expense', icon: 'mdi-chart-bar', description: 'Monthly income compared to expenses' },
  { title: 'Net Worth', icon: 'mdi-chart-line', description: 'Track your net worth over time' },
  { title: 'Cash Flow', icon: 'mdi-chart-timeline-variant', description: 'Daily and monthly cash flow analysis' },
]
</script>
