// // ** MUI Imports
// import Card from '@mui/material/Card'
// import Chip from '@mui/material/Chip'
// import Typography from '@mui/material/Typography'
// import CardContent from '@mui/material/CardContent'

// // ** Type Import
// import { TransactionStatusShap } from 'src/views/dashboards/merchant/types'

// // ** Custom Component Import
// import Icon from 'src/@core/components/icon'
// import CustomChip from 'src/@core/components/mui/chip'
// import CustomAvatar from 'src/@core/components/mui/avatar'

// const CardStatsTrasnsaction = (props: TransactionStatusShap) => {
//   // ** Props
//   const {
//     sx,
//     stats,
//     title,
//     chipText,
//     subtitle,
//     avatarIcon,
//     iconSize = 24,
//     avatarSize = 42,
//     chipColor = 'primary',
//     avatarColor = 'primary'
//   } = props

//   const RenderChip = chipColor === 'default' ? Chip : CustomChip

//   return (
//     <Card sx={{ ...sx }} style={{ height: '100%' }}>
//       <CardContent sx={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
//         <CustomAvatar
//           skin='light'
//           variant='rounded'
//           color={avatarColor}
//           sx={{ mb: 3.5, width: avatarSize, height: avatarSize }}
//         >
//           <Icon icon={avatarIcon} fontSize={iconSize} />
//         </CustomAvatar>
//         <Typography variant='h6' sx={{ mb: 1 }}>
//           {title}
//         </Typography>
//         <Typography variant='body2' sx={{ mb: 1, color: 'text.disabled' }}>
//           {subtitle}
//         </Typography>
//         <Typography sx={{ mb: 3.5, color: 'text.secondary' }}>{stats}</Typography>
//         <RenderChip
//           size='small'
//           label={chipText}
//           color={chipColor}
//           {...(chipColor === 'default'
//             ? { sx: { borderRadius: '4px', color: 'text.secondary' } }
//             : { rounded: true, skin: 'light' })}
//         />
//       </CardContent>
//     </Card>
//   )
// }

// export default CardStatsTrasnsaction


// src/@core/components/card-statistics/card-state-transaction.tsx
// src/@core/components/card-statistics/card-state-transaction.tsx

import Card from '@mui/material/Card'
import Typography from '@mui/material/Typography'
import CardContent from '@mui/material/CardContent'
import Button from '@mui/material/Button'
import Box from '@mui/material/Box'

// ** Type Import
import { TransactionStatusShap } from 'src/views/dashboards/merchant/types'

// ** Custom Component Import
import Icon from 'src/@core/components/icon'
import CustomAvatar from 'src/@core/components/mui/avatar'

const CardStatsTrasnsaction = (props: TransactionStatusShap) => {
  // ** Props
  const {
    sx,
    stats,
    title,
    subtitle,
    avatarIcon,
    iconSize = 24,
    avatarSize = 44,
    avatarColor = 'primary',
    buttonText,
    buttonText2,
    showButtons = false,
    buttonColor = 'primary',
    button2Color = 'primary',
    isSingleButton = false
  } = props

  // Get light button color based on avatarColor
  const getLightButtonColor = (color: string) => {
    const colorMap: { [key: string]: string } = {
      primary: '#E8F0FE',
      secondary: '#F5F5F5',
      success: '#E8F5E9',
      error: '#FFEBEE',
      warning: '#FFF3E0',
      info: '#E3F2FD'
    }
    return colorMap[color] || '#F5F5F5'
  }

  // Get dark text color based on avatarColor
  const getDarkTextColor = (color: string) => {
    const colorMap: { [key: string]: string } = {
      primary: '#1976D2',
      secondary: '#616161',
      success: '#2E7D32',
      error: '#D32F2F',
      warning: '#ED6C02',
      info: '#0288D1'
    }
    return colorMap[color] || '#1976D2'
  }

  return (
    <Card sx={{ ...sx, height: '100%' }}>
      <CardContent sx={{ 
        display: 'flex', 
        flexDirection: 'column', 
        alignItems: 'flex-start',
        p: theme => theme.spacing(4),
        height: '100%',
        justifyContent: 'space-between'
      }}>
        {/* Top Section */}
        <Box sx={{ width: '100%' }}>
          {/* Avatar */}
          <CustomAvatar
            skin='light'
            variant='rounded'
            color={avatarColor}
            sx={{ 
              width: avatarSize, 
              height: avatarSize,
              mb: 3,
              '& .MuiSvgIcon-root': {
                fontSize: iconSize
              }
            }}
          >
            <Icon icon={avatarIcon} fontSize={iconSize} />
          </CustomAvatar>

          {/* Title */}
          <Typography 
            variant='h6' 
            sx={{ 
              mb: 0.5, 
              fontWeight: 500,
              fontSize: '1rem',
              color: 'text.primary'
            }}
          >
            {title}
          </Typography>

          {/* Subtitle */}
          <Typography 
            variant='body2' 
            sx={{ 
              mb: 2, 
              color: 'text.secondary',
              fontSize: '0.8rem'
            }}
          >
            {subtitle}
          </Typography>

          {/* Stats */}
          <Typography 
            variant='h5' 
            sx={{ 
              mb: 3.5, 
              color: 'text.primary', 
              fontWeight: 600,
              fontSize: '1.5rem'
            }}
          >
            {stats}
          </Typography>
        </Box>

        {/* Bottom Section - Buttons */}
        {showButtons && (
          <Box sx={{ width: '100%' }}>
            {isSingleButton ? (
            
              <Button
                variant='contained'
                size='medium'
                fullWidth
                sx={{ 
                  backgroundColor: getLightButtonColor(buttonColor),
                  color: getDarkTextColor(buttonColor),
                  textTransform: 'none',
                  fontWeight: 600,
                  fontSize: '0.85rem',
                  py: 1.5,
                  borderRadius: '10px',
                  boxShadow: 'none',
                  justifyContent: 'center',
                  '&:hover': {
                    backgroundColor: getLightButtonColor(buttonColor),
                    boxShadow: 'none',
                    opacity: 0.8
                  }
                }}
                onClick={() => console.log(`${buttonText} clicked`)}
              >
                {buttonText}
              </Button>
            ) : (
             
              <Box sx={{ 
                display: 'flex', 
                gap: 2,
                width: '100%'
              }}>
                <Button
                  variant='contained'
                  size='medium'
                  fullWidth
                  sx={{ 
                    backgroundColor: getLightButtonColor(buttonColor),
                    color: getDarkTextColor(buttonColor),
                    textTransform: 'none',
                    fontWeight: 600,
                    fontSize: '0.85rem',
                    py: 1.5,
                    borderRadius: '10px',
                    boxShadow: 'none',
                    justifyContent: 'center',
                    '&:hover': {
                      backgroundColor: getLightButtonColor(buttonColor),
                      boxShadow: 'none',
                      opacity: 0.8
                    }
                  }}
                  onClick={() => console.log(`${buttonText} clicked`)}
                >
                  {buttonText}
                </Button>
                <Button
                  variant='contained'
                  size='medium'
                  fullWidth
                  sx={{ 
                    backgroundColor: getLightButtonColor(button2Color),
                    color: getDarkTextColor(button2Color),
                    textTransform: 'none',
                    fontWeight: 600,
                    fontSize: '0.85rem',
                    py: 1.5,
                    borderRadius: '10px',
                    boxShadow: 'none',
                    justifyContent: 'center',
                    '&:hover': {
                      backgroundColor: getLightButtonColor(button2Color),
                      boxShadow: 'none',
                      opacity: 0.8
                    }
                  }}
                  onClick={() => console.log(`${buttonText2} clicked`)}
                >
                  {buttonText2}
                </Button>
              </Box>
            )}
          </Box>
        )}
      </CardContent>
    </Card>
  )
}

export default CardStatsTrasnsaction