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 BillPaymentsSectionProps {
  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 billServices = [
  { id: 'electricity', name: 'Electricity Bill', icon: 'tabler:bolt', color: '#FFC107' },
  { id: 'loan', name: 'Loan EMI Payment', icon: 'tabler:credit-card', color: '#E91E63' },
  { id: 'cable', name: 'Cable TV', icon: 'tabler:device-tv', color: '#3F51B5' },
  { id: 'tax', name: 'Municipal Tax', icon: 'tabler:building', color: '#607D8B' },
  { id: 'water', name: 'Water Bill', icon: 'tabler:droplet', color: '#2196F3' },
  { id: 'gas', name: 'Gas Payment', icon: 'tabler:gas-station', color: '#FF9800' },
  { id: 'challan', name: 'Traffic Ticket', icon: 'tabler:alert-triangle', color: '#F44336' },
  { id: 'apartment', name: 'Apartment Rent', icon: 'tabler:building-community', color: '#795548' },
]

const BillPaymentsSection = ({ onServiceClick }: BillPaymentsSectionProps) => {
  return (
    <Box>
      <Typography variant='h6' sx={{ mb: 3 }}>Bill Payments</Typography>
      <Grid container spacing={4}>
        {billServices.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 BillPaymentsSection