'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 ReportPurchaseList: React.FC = () => {
  const { lang: locale } = useParams()

  const purchaseReports = [
    {
      title: 'Detail Pembelian',
      iconClass: 'tabler-shopping-cart',
      link: ''
    },
    {
      title: 'Tagihan Vendor',
      iconClass: 'tabler-shopping-cart',
      link: ''
    },
    {
      title: 'Pembelian per Produk',
      iconClass: 'tabler-shopping-cart',
      link: ''
    },
    {
      title: 'Pembelian per Vendor',
      iconClass: 'tabler-shopping-cart',
      link: ''
    },
    {
      title: 'Pembelian Produk per Vendor',
      iconClass: 'tabler-shopping-cart',
      link: ''
    }
  ]

  return (
    <div>
      <Typography variant='h5' className='mbe-2'>
        Pembelian
      </Typography>

      <Grid container spacing={3}>
        {purchaseReports.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 ReportPurchaseList
