import { Container, Typography } from '@mui/material'
import Grid from '@mui/material/Grid2'
import ReportCard from './ReportCard'

const ReportFinancialList: React.FC = () => {
  const financialReports = [
    {
      title: 'Arus Kas',
      iconClass: 'tabler-cash'
    },
    {
      title: 'Laba Rugi',
      iconClass: 'tabler-cash'
    },
    {
      title: 'Neraca',
      iconClass: 'tabler-cash'
    }
  ]

  return (
    <div>
      <Typography variant='h5' className='mbe-1'>
        Finansial
      </Typography>

      <Grid container spacing={3}>
        {financialReports.map((report, index) => (
          <Grid key={index} size={{ xs: 12, sm: 4, md: 3 }}>
            <ReportCard title={report.title} avatarIcon={report.iconClass} />
          </Grid>
        ))}
      </Grid>
    </div>
  )
}

export default ReportFinancialList