import React, { SyntheticEvent, useState } from 'react'

// ** MUI Imports
import Box from '@mui/material/Box'
import TabPanel from '@mui/lab/TabPanel'
import TabContext from '@mui/lab/TabContext'
import Typography from '@mui/material/Typography'
import PageHeader from 'src/@core/components/page-header'
import BankTransaction from './BankTransaction'


const TransactionsPage = () => {
  // ** State
  const [value, setValue] = useState<string>('1')

  const handleChange = (event: SyntheticEvent, newValue: string) => {
    setValue(newValue)
  }

  return (
    <Box sx={{ scrollBehavior: 'auto' }}>
      <PageHeader
        title={
          <Typography variant='h5' sx={{ mb: 6 }}>
            Transactions Management
          </Typography>
        }
      />

      <TabContext value={value}>
        {/* <TabList onChange={handleChange} aria-label='transaction tabs'>
          <Tab value='1' label='Bank Transaction' />
          <Tab value='2' label='Wallet Transaction' />
          <Tab value='3' label='Cash Transaction' />
        </TabList> */}
        <TabPanel value='1' sx={{ p: 0, mt: 4 }}>
          <BankTransaction />
        </TabPanel>
        {/* <TabPanel value='2' sx={{ p: 0, mt: 4 }}>
          <WalletTransaction />
        </TabPanel>
        <TabPanel value='3' sx={{ p: 0, mt: 4 }}>
          <CashTransaction />
        </TabPanel> */}
      </TabContext>
    </Box>
  )
}

TransactionsPage.acl = {
  action: 'read',
  subject: 'user-management'
}

export default TransactionsPage