// 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: 'Hutang Anda',
    stats: 'Rp 542.340.000',
    avatarIcon: 'tabler-credit-card',
    avatarColor: 'error',
    trend: 'positive',
    trendNumber: '12%',
    subtitle: 'Total yang harus dibayar'
  },
  {
    title: 'Piutang Anda',
    stats: 'Rp 387.250.000',
    avatarIcon: 'tabler-wallet',
    avatarColor: 'success',
    trend: 'positive',
    trendNumber: '8%',
    subtitle: 'Total yang harus dibayar vendor'
  },
  {
    title: 'Pembayaran Diterima',
    stats: 'Rp 156.800.000',
    avatarIcon: 'tabler-arrow-down-circle',
    avatarColor: 'success',
    trend: 'positive',
    trendNumber: '23%',
    subtitle: 'Bulan ini'
  },
  {
    title: 'Pembayaran Dikirim',
    stats: 'Rp 89.450.000',
    avatarIcon: 'tabler-arrow-up-circle',
    avatarColor: 'warning',
    trend: 'negative',
    trendNumber: '5%',
    subtitle: 'Bulan ini'
  },
  {
    title: 'Hutang Jatuh Tempo',
    stats: 'Rp 67.890.000',
    avatarIcon: 'tabler-clock-exclamation',
    avatarColor: 'error',
    trend: 'negative',
    trendNumber: '15%',
    subtitle: 'Pembayaran terlambat'
  },
  {
    title: 'Piutang Tertunda',
    stats: 'Rp 134.560.000',
    avatarIcon: 'tabler-clock-dollar',
    avatarColor: 'info',
    trend: 'positive',
    trendNumber: '28%',
    subtitle: 'Menunggu dari vendor'
  }
]

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

export default VendorListCards
