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

// Types Imports
import type { CardStatsHorizontalWithAvatarProps } from '@/types/pages/widgetTypes'

// Component Imports
import CardStatsHorizontalWithAvatar from '@components/card-statistics/HorizontalWithAvatar'

const data: CardStatsHorizontalWithAvatarProps[] = [
  {
    stats: 'Rp 542.340.000',
    title: 'Hutang Anda',
    avatarIcon: 'tabler-credit-card',
    avatarColor: 'error'
  },
  {
    stats: 'Rp 387.250.000',
    title: 'Piutang Anda',
    avatarIcon: 'tabler-wallet',
    avatarColor: 'success'
  },
  {
    stats: 'Rp 156.800.000',
    title: 'Pembayaran Diterima',
    avatarIcon: 'tabler-arrow-down-circle',
    avatarColor: 'success'
  },
  {
    stats: 'Rp 89.450.000',
    title: 'Pembayaran Dikirim',
    avatarIcon: 'tabler-arrow-up-circle',
    avatarColor: 'warning'
  },
  {
    stats: 'Rp 67.890.000',
    title: 'Hutang Jatuh Tempo',
    avatarIcon: 'tabler-clock-exclamation',
    avatarColor: 'error'
  },
  {
    stats: 'Rp 134.560.000',
    title: 'Piutang Tertunda',
    avatarIcon: 'tabler-clock-dollar',
    avatarColor: 'info'
  }
]

const VendorStatistic = () => {
  return (
    data && (
      <Grid container spacing={6}>
        {data.map((item, index) => (
          <Grid size={{ xs: 12, sm: 6, md: 4 }} key={index}>
            <CardStatsHorizontalWithAvatar {...item} avatarSkin='light' />
          </Grid>
        ))}
      </Grid>
    )
  )
}

export default VendorStatistic
