<template>
  <el-card class="panel" :style="{background: settingsStore.theme}">
    <div>
      <el-icon :size="40">
        <slot name="icon"/>
      </el-icon>
      <b style="margin-left: 10px;font-size: 20px;">{{ title }}</b>
    </div>
    <div style="display: flex; justify-content: space-between; margin-top: 10px;">
      <slot/>
    </div>
  </el-card>
</template>

<script setup>
import useSettingsStore from '@/store/modules/settings'

const settingsStore = useSettingsStore()

defineProps({
  icon: String,
  title: String,
})

</script>

<style lang='scss' scoped>

</style>
