// 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: 'Pendapatan',
    stats: '29.004.775',
    avatarIcon: 'tabler-trending-down',
    avatarColor: 'error',
    trend: 'negative',
    trendNumber: '48,8%',
    subtitle: 'vs Bulan Lalu'
  },
  {
    title: 'Margin Laba Bersih',
    stats: '38%',
    avatarIcon: 'tabler-gauge',
    avatarColor: 'success',
    trend: 'positive',
    trendNumber: 'Bulan Ini',
    subtitle: 'Bulan Ini'
  },
  {
    title: 'Laba Kotor',
    stats: '21.076.389',
    avatarIcon: 'tabler-trending-down',
    avatarColor: 'error',
    trend: 'negative',
    trendNumber: '43,5%',
    subtitle: 'vs bulan lalu'
  },
  {
    title: 'Laba Bersih',
    stats: '11.111.074',
    avatarIcon: 'tabler-trending-down',
    avatarColor: 'error',
    trend: 'negative',
    trendNumber: '36,8%',
    subtitle: 'vs bulan lalu'
  },
  {
    title: 'Margin Laba Kotor',
    stats: '73%',
    avatarIcon: 'tabler-gauge',
    avatarColor: 'success',
    trend: 'positive',
    trendNumber: 'Bulan Ini',
    subtitle: 'Bulan Ini'
  },
  {
    title: 'Biaya Operasional',
    stats: '9.965.315',
    avatarIcon: 'tabler-trending-down',
    avatarColor: 'error',
    trend: 'negative',
    trendNumber: '49,4%',
    subtitle: 'vs Bulan Lalu'
  },
  {
    title: 'Rasio Biaya Operasional',
    stats: '61,7%',
    avatarIcon: 'tabler-gauge',
    avatarColor: 'success',
    trend: 'positive',
    trendNumber: 'Bulan Ini',
    subtitle: 'Bulan Ini'
  },
  {
    title: 'EBITDA',
    stats: '11.032.696',
    avatarIcon: 'tabler-trending-down',
    avatarColor: 'error',
    trend: 'negative',
    trendNumber: '37,3%',
    subtitle: 'vs bulan lalu'
  }
]

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

export default ReportProfitLossCard