'use client'

import { Container, Typography } from '@mui/material'
import Grid from '@mui/material/Grid2'
import ReportCard from './ReportCard'
import { getLocalizedUrl } from '@/utils/i18n'
import { Locale } from '@/configs/i18n'
import { useParams } from 'next/navigation'

const ReportFinancialList: React.FC = () => {
  const { lang: locale } = useParams()

  const financialReports = [
    {
      title: 'Arus Kas',
      iconClass: 'tabler-cash',
      link: getLocalizedUrl(`/apps/report/cash-flow`, locale as Locale)
    },
    {
      title: 'Laba Rugi',
      iconClass: 'tabler-cash',
      link: getLocalizedUrl(`/apps/report/profit-loss`, locale as Locale)
    },
    {
      title: 'Neraca',
      iconClass: 'tabler-cash',
      link: getLocalizedUrl(`/apps/report/neraca`, locale as Locale)
    },
    {
      title: 'Ringkasan Eksekutif',
      iconClass: 'tabler-cash',
      link: getLocalizedUrl(`/apps/report/neraca`, locale as Locale)
    }
  ]

  return (
    <div>
      <Typography variant='h5' className='mbe-2'>
        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} href={report.link} />
          </Grid>
        ))}
      </Grid>
    </div>
  )
}

export default ReportFinancialList