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 OtherServicesSectionProps {
  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 otherServices = [

{ id: 'education', name: 'Education Fees', icon: 'tabler:school', color: '#2196F3' },

{ id: 'donation', name: 'Donation', icon: 'tabler:gift', color: '#FF9800' },



]

const OtherServicesSection = ({ onServiceClick }: OtherServicesSectionProps) => {
  return (
    <Box>
      <Typography variant='h6' sx={{ mb: 3 }}>Other Services</Typography>
      <Grid container spacing={4}>
        {otherServices.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 OtherServicesSection