import React from 'react'

// ** MUI
import {
  Card,
  CardContent,
  Box,
  Typography
} from '@mui/material'

interface GatewayStatsProps {
  title: string
  value: string
  subtitle: string
  type: 'volume' | 'success' | 'pending' | 'failed' | 'refund'
}

const GatewayStats = ({
  title,
  value,
  subtitle,
  type
}: GatewayStatsProps) => {

  const isVolume = type === 'volume'

  return (
    <Card
      sx={{
        height: '100%',
        borderRadius: 3,
        boxShadow: 'none',
        border: theme =>
          `1px solid ${theme.palette.divider}`
      }}
    >
      <CardContent>

        {/* Visual indicator */}
        <Box
          sx={{
            width: 42,
            height: 42,
            borderRadius: 2,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: isVolume
              ? 'rgba(45,156,255,.12)'
              : 'rgba(40,218,198,.12)',
            color: isVolume
              ? '#2d9cff'
              : '#28dac6',
            fontSize: 18,
            fontWeight: 700,
            mb: 2
          }}
        >
          {isVolume ? '↗' : '✓'}
        </Box>

        <Typography
          variant='body2'
          color='text.secondary'
        >
          {title}
        </Typography>

        <Typography
          variant='h5'
          sx={{
            fontWeight: 600,
            mt: 0.5
          }}
        >
          {value}
        </Typography>

        <Typography
          variant='caption'
          color='success.main'
          sx={{
            display: 'block',
            mt: 1
          }}
        >
          {subtitle}
        </Typography>

      </CardContent>
    </Card>
  )
}

export default GatewayStats