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

  const salesReports = [
    {
      title: 'Penjualan',
      iconClass: 'tabler-receipt-2',
      link: getLocalizedUrl(`/apps/report/sales/sales-report`, locale as Locale)
    },
    // {
    //   title: 'Detail Penjualan',
    //   iconClass: 'tabler-receipt-2',
    //   link: ''
    // },
    // {
    //   title: 'Tagihan Pelanggan',
    //   iconClass: 'tabler-receipt-2',
    //   link: ''
    // },
    {
      title: 'Penjualan per Produk',
      iconClass: 'tabler-receipt-2',
      link: getLocalizedUrl(`/apps/report/sales/sales-product`, locale as Locale)
    }
    // {
    //   title: 'Penjualan per Kategori Produk',
    //   iconClass: 'tabler-receipt-2',
    //   link: ''
    // },
    // {
    //   title: 'Penjualan Produk per Pelanggan',
    //   iconClass: 'tabler-receipt-2',
    //   link: ''
    // },
    // {
    //   title: 'Pemesanan per Produk',
    //   iconClass: 'tabler-receipt-2',
    //   link: ''
    // }
  ]

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

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