import React from 'react'

// ** MUI Imports
import Box from '@mui/material/Box'
import Grid from '@mui/material/Grid'
import Card from '@mui/material/Card'
import CardContent from '@mui/material/CardContent'
import Typography from '@mui/material/Typography'
import { styled } from '@mui/material/styles'

// ** Icon Imports
import Icon from 'src/@core/components/icon'

interface RechargeSectionProps {
  onServiceClick: (service: any) => void
}

const ServiceCard = styled(Card)(({ theme }) => ({
  cursor: 'pointer',
  transition: 'transform 0.3s ease-in-out',
  '&:hover': {
    transform: 'translateY(-5px)',
    boxShadow: theme.shadows[10]
  }
}))

const rechargeServices = [
  { id: 'mobile', name: 'Mobile Recharge', icon: 'tabler:device-mobile', color: '#4CAF50', path: 'mobile-recharge' },
  { id: 'broadband', name: 'Broadband/Wifi Recharge', icon: 'tabler:wifi', color: '#2196F3', path: 'broadband-recharge' },
  { id: 'toll', name: 'Toll Tag Recharge', icon: 'tabler:road', color: '#FF9800', path: 'toll-recharge' },
  { id: 'cable', name: 'Cable Recharge', icon: 'tabler:device-tv', color: '#9C27B0', path: 'cable-recharge' },
  { id: 'metro', name: 'Metro Card ', icon: 'tabler:train', color: '#F44336', path: 'metro-recharge' },
  { id: 'datacard', name: 'Data Card/Wifi Recharge', icon: 'tabler:usb', color: '#009688', path: 'datacard-recharge' },
]

const RechargeSection = ({ onServiceClick }: RechargeSectionProps) => {
  return (
    <Box>
      <Typography variant='h6' sx={{ mb: 3 }}>Recharge Services</Typography>
      <Grid container spacing={4}>
        {rechargeServices.map((service) => (
          <Grid item xs={12} sm={6} md={4} lg={3} key={service.id}>
            <ServiceCard onClick={() => onServiceClick(service)}>
              <CardContent sx={{ textAlign: 'center' }}>
                <Box sx={{ mb: 2, display: 'flex', justifyContent: 'center' }}>
                  <Box sx={{ p: 2, borderRadius: '50%', bgcolor: `${service.color}20` }}>
                    <Icon icon={service.icon} fontSize={32} color={service.color} />
                  </Box>
                </Box>
                <Typography variant='body1' sx={{ fontWeight: 500 }}>{service.name}</Typography>
              </CardContent>
            </ServiceCard>
          </Grid>
        ))}
      </Grid>
    </Box>
  )
}

export default RechargeSection