// MUI Imports
import Grid from '@mui/material/Grid2'

// Type Imports
import type { UserDataType } from '@components/card-statistics/HorizontalWithSubtitle'

// Component Imports
import HorizontalWithSubtitle from '@components/card-statistics/HorizontalWithSubtitle'

// Vars
const data: UserDataType[] = [
  {
    title: 'PEMBELIAN',
    stats: '12.932.460',
    avatarIcon: 'tabler-trending-up',
    avatarColor: 'success',
    trend: 'positive',
    trendNumber: '114,7%',
    subtitle: '15 Tagihan Pembelian Bulan Ini'
  },
  {
    title: 'PEMBAYARAN PEMBELIAN DIKIRIM',
    stats: '2.573.790',
    avatarIcon: 'tabler-trending-down',
    avatarColor: 'error',
    trend: 'negative',
    trendNumber: '34,0%',
    subtitle: '5 Tagihan Pembelian Bulan Ini'
  },
  {
    title: 'MENUNGGU PEMBAYARAN PEMBELIAN',
    stats: '10.358.670',
    avatarIcon: 'tabler-trending-up',
    avatarColor: 'success',
    trend: 'positive',
    trendNumber: '380,6%',
    subtitle: '10 Tagihan Pembelian'
  },
  {
    title: 'JATUH TEMPO TAGIHAN PEMBELIAN',
    stats: '6.033.000',
    avatarIcon: 'tabler-clock-exclamation',
    avatarColor: 'error',
    trend: 'neutral',
    trendNumber: '100%',
    subtitle: '6 Tagihan Pembelian'
  }
]

const PurchaseOverviewCards = () => {
  return (
    <Grid container spacing={6}>
      {data.map((item, i) => (
        <Grid key={i} size={{ xs: 12, sm: 6 }}>
          <HorizontalWithSubtitle {...item} />
        </Grid>
      ))}
    </Grid>
  )
}

export default PurchaseOverviewCards
