'use client'

import { Card, CardContent, CardHeader, MenuItem, Stack } from '@mui/material'
import type { Theme } from '@mui/material/styles'
import type { ChangeEvent } from 'react'
import type { Table } from '@tanstack/react-table'

import CustomTextField from '@/@core/components/mui/TextField'
import CustomTablePaginationComponent from '@/components/CustomTablePaginationComponent'
import DataTable from '@/components/data/DataTable'

type Translate = (key: string, values?: Record<string, any>) => string

type PaymentLinksTableSectionProps<TData> = {
  t: Translate
  table: Table<TData>
  isTableLoading: boolean
  total: number
  rowsPerPage: number
  theme: Theme
  onPageSizeChange: (event: ChangeEvent<HTMLInputElement>) => void
}

const PaymentLinksTableSection = <TData,>({
  t,
  table,
  isTableLoading,
  total,
  rowsPerPage,
  theme,
  onPageSizeChange
}: PaymentLinksTableSectionProps<TData>) => {
  return (
    <Card className='shadow-sm' sx={{ border: `1px solid ${theme.palette.divider}` }}>
      <CardHeader title={t('table.title')} subheader={isTableLoading ? t('table.loading') : t('table.total', { count: total })} />
      <CardContent>
        <DataTable table={table} isLoading={isTableLoading} skeletonRows={rowsPerPage} noDataLabel={t('table.noData')} />
      </CardContent>
      <Stack
        direction={{ xs: 'column', md: 'row' }}
        justifyContent='space-between'
        alignItems='center'
        gap={3}
        className='px-6 py-4'
      >
        <CustomTextField select value={table.getState().pagination.pageSize} onChange={onPageSizeChange} className='w-24'>
          <MenuItem value='5'>5</MenuItem>
          <MenuItem value='10'>10</MenuItem>
          <MenuItem value='20'>20</MenuItem>
          <MenuItem value='50'>50</MenuItem>
        </CustomTextField>
        <CustomTablePaginationComponent table={table} totalItems={total} />
      </Stack>
    </Card>
  )
}

export default PaymentLinksTableSection
