<template>
  <q-card flat class="q-pa-lg">
    <div class="column no-wrap full-width">
      <div class="flex items-center no-wrap">
        <div class="round background q-mr-sm">
          <q-icon
            class="q-pa-sm"
            :name="props.icon"
            size="24px"
            :color="props.color"
          />
        </div>
        <span class="text-h5">{{ props.title }}</span>
      </div>
      <div class="flex no-wrap full-width justify-between q-pa-sm">
        <div class="column flex-center">
          <span class="text-h3">{{ props.numberCard }}</span>
          <div
            class="flex no-wrap text-subtitle2"
            :class="props.numberPorcent > 0 ? 'text-positive' : 'text-negative'"
          >
            <q-icon
              :name="
                props.numberPorcent > 0 ? 'mdi-arrow-up' : 'mdi-arrow-down'
              "
              size="18px"
              class="q-mr-xs"
            />
            {{ props.numberPorcent + "%" }}
          </div>
        </div>
        <div class="flex justify-end" style="max-width: 120px; height: 80px">
          <slot name="chart">
            <MiniLineChart
              :data="chartData"
              line-color="#1976D2"
              fill-color="rgba(0, 0, 0, 0)"
            />

            <MiniBarChart :data="chartData" bar-color="#1976D2" />
          </slot>
        </div>
      </div>
    </div>
  </q-card>
</template>

<script setup>
// import MiniLineChart from "./mini/MiniLineChart.vue";
import MiniBarChart from "./mini/MiniBarChart.vue";
const props = defineProps({
  color: {
    type: String,
    default: "primary",
  },
  title: {
    type: String,
    default: "Usuários",
  },
  icon: {
    type: String,
    default: "mdi-account",
  },
  chartData: {
    type: Array,
    default: () =>
      Array.from({ length: 7 }, () => Math.floor(Math.random() * 100)),
  },
  numberCard: {
    type: Number,
    default: () => Math.floor(Math.random() * 100),
  },
  numberPorcent: {
    type: Number,
    default: () => Math.ceil(Math.random() * 200 - 100),
  },
});
</script>
<style lang="scss" scoped>
@use "sass:map";
@use "src/css/quasar.variables.scss";

body.body--light {
  .background {
    background: rgba(map.get($colors, "primary"), 0.2) !important;
  }
}

body.body--dark {
  .background {
    background: rgba(map.get($colors-dark, "primary"), 0.2) !important;
  }
}
</style>
