// import React from 'react'

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

// import { useRouter } from 'next/router'

// interface QuickAction {
//   title: string
//   description: string
//   symbol: string
//   color: string
//   path: string
// }

// const actions: QuickAction[] = [
//   {
//     title: 'Add Money',
//     description: 'Add funds to your wallet',
//     symbol: '+',
//     color: '#28dac6',
//     path: '/add-money'
//   },
//   {
//     title: 'Send Money',
//     description: 'Transfer money instantly',
//     symbol: '→',
//     color: '#28b8d8',
//     path: '/send-money'
//   },
//   {
//     title: 'FX Manager',
//     description: 'Manage your foreign exchange',
//     symbol: 'FX',
//     color: '#3478db',
//     path: '/fx-manager'
//   },
//   {
//     title: 'Saving Settings',
//     description: 'Manage your savings preferences',
//     symbol: 'S',
//     color: '#7b61ff',
//     path: '/saving-settings'
//   },
//   {
//     title: 'Utility Bill',
//     description: 'Pay your utility bills seamlessly',
//     symbol: '₹',
//     color: '#ff9f43',
//     path: '/utility-bill'
//   },
//   {
//     title: 'Travel Hub',
//     description: 'Book tickets and manage travel',
//     symbol: '✈',
//     color: '#3478db',
//     path: '/travel-hub'
//   }
// ]

// const QuickActions = () => {
//   const router = useRouter()

//   return (
//     <Box sx={{ mt: 2 }}>

//       <Grid container spacing={2}>

//         {actions.map(action => (

//           <Grid
//             item
//             xs={12}
//             sm={6}
//             md={4}
//             lg={2}
//             key={action.title}
//           >

//             <Card
//               onClick={() =>
//                 router.push(action.path)
//               }
//               sx={{
//                 height: '100%',
//                 cursor: 'pointer',
//                 borderRadius: 3,
//                 boxShadow: 'none',
//                 border: theme =>
//                   `1px solid ${theme.palette.divider}`,
//                 transition:
//                   'all .25s ease',

//                 '&:hover': {
//                   transform:
//                     'translateY(-4px)',
//                   boxShadow:
//                     '0 10px 28px rgba(0,0,0,.08)',
//                   borderColor:
//                     'rgba(40,218,198,.35)'
//                 }
//               }}
//             >

//               <Box sx={{ p: 2 }}>

//                 {/* Symbol */}
//                 <Box
//                   sx={{
//                     width: 42,
//                     height: 42,
//                     borderRadius: '12px',
//                     display: 'flex',
//                     alignItems: 'center',
//                     justifyContent: 'center',
//                     color: action.color,
//                     backgroundColor:
//                       `${action.color}18`,
//                     fontSize:
//                       action.symbol === 'FX'
//                         ? 12
//                         : 20,
//                     fontWeight: 700
//                   }}
//                 >
//                   {action.symbol}
//                 </Box>

//                 {/* Title */}
//                 <Typography
//                   variant='subtitle2'
//                   fontWeight={600}
//                   sx={{
//                     mt: 1.5
//                   }}
//                 >
//                   {action.title}
//                 </Typography>

//                 {/* Description */}
//                 <Typography
//                   variant='caption'
//                   color='text.secondary'
//                   sx={{
//                     display: 'block',
//                     mt: 0.5,
//                     minHeight: 34,
//                     lineHeight: 1.45
//                   }}
//                 >
//                   {action.description}
//                 </Typography>

//                 {/* Arrow */}
//                 <Box
//                   sx={{
//                     display: 'flex',
//                     justifyContent: 'flex-end',
//                     mt: 1,
//                     color: 'text.secondary',
//                     fontSize: 17
//                   }}
//                 >
//                   →
//                 </Box>

//               </Box>

//             </Card>

//           </Grid>

//         ))}

//       </Grid>

//     </Box>
//   )
// }

// export default QuickActions


import React from 'react'

// ** MUI
import { Box, Typography } from '@mui/material'
import { keyframes } from '@emotion/react'

// ** Icons
import { CreditCard, Send, ShieldCheck, PiggyBank, Lightbulb, Plane } from 'lucide-react'

import { useRouter } from 'next/router'

interface QuickAction {
  title: string
  tag: string
  icon: React.ElementType
  color: string
  path: string
}

const actions: QuickAction[] = [
  {
    title: 'Add money',
    tag: 'REFILL BALANCE',
    icon: CreditCard,
    color: '#6D5EF5',
    path: '/add-money'
  },
  {
    title: 'Send money',
    tag: 'TRANSFER FUNDS',
    icon: Send,
    color: '#8B5CF6',
    path: '/send-money'
  },
  {
    title: 'Escrow',
    tag: 'SECURE HOLD',
    icon: ShieldCheck,
    color: '#4F46E5',
    path: '/escrow-management'
  },
  {
    title: 'Saving setup',
    tag: 'AUTO-SAVE',
    icon: PiggyBank,
    color: '#16A34A',
    path: '/saving-settings'
  },
  {
    title: 'Utility bill',
    tag: 'RECURRING PAY',
    icon: Lightbulb,
    color: '#F59E0B',
    path: '/bill-payment'
  },
  {
    title: 'Travel Booking',
    tag: 'BOOK & PAY',
    icon: Plane,
    color: '#0EA5E9',
    path: '/travel-booking'
  }
]

const fadeInUp = keyframes`
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
`

const QuickActions = () => {
  const router = useRouter()

  return (
    <Box sx={{ mt: 2 }}>
      {/* Eyebrow label */}
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: 2.25 }}>
        <Box sx={{py: 4.5}}/>
        <Typography
          sx={{
            fontSize: '0.72rem',
            fontWeight: 700,
            letterSpacing: '0.14em',
          }}
        >
          ACTION TERMINAL
        </Typography>
      </Box>

      <Box
        sx={{
          display: 'grid',
          gap: 2,
          gridTemplateColumns: {
            xs: 'repeat(2, 1fr)',
            sm: 'repeat(3, 1fr)',
            md: 'repeat(6, 1fr)'
          }
        }}
      >
        {actions.map((action, index) => {
          const Icon = action.icon

          return (
            <Box
              key={action.title}
              onClick={() => router.push(action.path)}
              sx={{
                cursor: 'pointer',
                textAlign: 'center',
                position: 'relative',
                overflow: 'hidden',
                px: 2,
                py: 4.5,
                minHeight: 150,
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
                borderRadius: '20px',
                backgroundColor: 'background.paper',
                border: theme => `1px solid ${theme.palette.divider}`,
                animation: `${fadeInUp} .45s cubic-bezier(.16,1,.3,1) both`,
                animationDelay: `${index * 55}ms`,
                transition: 'transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease',

                '&:hover': {
                  transform: 'translateY(-5px)',
                  borderColor: `${action.color}45`,
                  boxShadow: `0 18px 32px -10px ${action.color}30`,

                  '& .qa-icon': {
                    transform: 'translateY(-2px) scale(1.06)',
                    boxShadow: `0 8px 16px -4px ${action.color}55`
                  },

                  '& .qa-underline': {
                    transform: 'scaleX(1)'
                  },

                  '& .qa-tag': {
                    backgroundColor: `${action.color}17`
                  }
                }
              }}
            >
              <Box
                className='qa-icon'
                sx={{
                  width: 50,
                  height: 50,
                  mb: 2,
                  borderRadius: '15px',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  color: action.color,
                  background: `linear-gradient(155deg, ${action.color}22, ${action.color}0D)`,
                  transition: 'transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease'
                }}
              >
                <Icon size={22} strokeWidth={2} />
              </Box>

              <Typography
                variant='subtitle2'
                fontWeight={700}
                sx={{ fontSize: '0.92rem', color: 'text.primary' }}
              >
                {action.title}
              </Typography>

              {/* Underline accent */}
              <Box
                className='qa-underline'
                sx={{
                  width: 18,
                  height: 2,
                  mt: 0.85,
                  mb: 0.85,
                  borderRadius: '2px',
                  backgroundColor: action.color,
                  transform: 'scaleX(0.4)',
                  transformOrigin: 'center',
                  transition: 'transform .3s ease'
                }}
              />

              <Box
                className='qa-tag'
                sx={{
                  px: 1.25,
                  py: 0.35,
                  borderRadius: '999px',
                  backgroundColor: 'transparent',
                  transition: 'background-color .3s ease'
                }}
              >
                <Typography
                  sx={{
                    fontSize: '0.64rem',
                    fontWeight: 700,
                    letterSpacing: '0.06em',
                    color: action.color
                  }}
                >
                  {action.tag}
                </Typography>
              </Box>
            </Box>
          )
        })}
      </Box>
    </Box>
  )
}

export default QuickActions