<template>
  <SettingsRawTable :columns="columns" :data="data">
    <template #cell(finance_notifications)="{ row }">
      <div class="d-flex align-items-center text-clr-grey-600">
        <Component :is="resolveComponent(`ui-icon-${row.original.icon}`)" :style="`color: ${row.original.color}`" />
        <h4 class="ml-10">
          {{ row.original.finance_notifications }}
        </h4>
      </div>
    </template>

    <template #cell(telegram)="{ row }">
      <div class="d-flex justify-content-center">
        <UiCheckbox id="telegram" />
      </div>
    </template>

    <template #cell(mail)="{ row }">
      <div class="d-flex justify-content-center">
        <UiCheckbox id="mail" :model-value="true" disabled />
      </div>
    </template>

    <template #cell(push)="{ row }">
      <div class="d-flex justify-content-center">
        <UiCheckbox id="push" :model-value="true" />
      </div>
    </template>
  </SettingsRawTable>
</template>

<script setup>
import { createColumnHelper } from '@tanstack/vue-table'

const columnHelper = createColumnHelper()

const columns = [
  columnHelper.display({
    id: 'finance_notifications',
    header: 'Finance Notifications',
  }),
  columnHelper.display({
    id: 'telegram',
    header: 'Telegram',
  }),
  columnHelper.display({
    id: 'mail',
    header: 'Mail',
  }),
  columnHelper.display({
    id: 'push',
    header: 'Push',
  }),
]

const data = [
  { finance_notifications: 'Поступления средств', icon: 'ArrowReceive', color: '#10C44C' },
  { finance_notifications: 'Выводы', icon: 'ArrowSend', color: '#1464D3' },
  { finance_notifications: 'Счет частично оплачен', icon: 'InstallmentPlan' },
]
</script>
