// 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: 'PENJUALAN',
    stats: '122.274.450',
    avatarIcon: 'tabler-trending-up',
    avatarColor: 'success',
    trend: 'positive',
    trendNumber: '162,3%',
    subtitle: '46 Tagihan Tahun Ini'
  },
  {
    title: 'PEMBAYARAN DITERIMA',
    stats: '66.742.440',
    avatarIcon: 'tabler-trending-up',
    avatarColor: 'success',
    trend: 'positive',
    trendNumber: '175,6%',
    subtitle: '27 Tagihan Tahun Ini'
  },
  {
    title: 'MENUNGGU PEMBAYARAN',
    stats: '55.532.009',
    avatarIcon: 'tabler-trending-up',
    avatarColor: 'success',
    trend: 'positive',
    trendNumber: '149,6%',
    subtitle: '22 Tagihan'
  },
  {
    title: 'JATUH TEMPO',
    stats: '48.246.990',
    avatarIcon: 'tabler-clock-exclamation',
    avatarColor: 'error',
    trend: 'negative',
    trendNumber: '89,9%',
    subtitle: '16 Tagihan'
  }
]

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

export default SalesOverviewCards
