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 BookBuySectionProps {
  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 bookBuyServices = [

  { id: 'movie', name: 'Movie Tickets', icon: 'tabler:movie', color: '#9C27B0' },
  { id: 'entertainment', name: 'Entertainment', icon: 'tabler:movie', color: '#E91E63' },
  { id: 'mutual_funds', name: 'Invest in Mutual Funds', icon: 'tabler:chart-line', color: '#4CAF50' },
  { id: 'stocks', name: 'Invest in Stocks', icon: 'tabler:trending-up', color: '#2196F3' }
]

const BookBuySection = ({ onServiceClick }: BookBuySectionProps) => {
  return (
    <Box>
      <Typography variant='h6' sx={{ mb: 3 }}>Book & Buy</Typography>
      <Grid container spacing={4}>
        {bookBuyServices.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 BookBuySection