import React from 'react'

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

interface PaymentSwitcherProps {
  value: boolean
  onChange: (value: boolean) => void
}

const PaymentSwitcher = ({
  value,
  onChange
}: PaymentSwitcherProps) => {
  return (
    <Box
      sx={{
        display: 'flex',
        justifyContent: 'center',
        mb: 1
      }}
    >
      <Box
        sx={{
          position: 'relative',
          display: 'flex',
          alignItems: 'center',
          width: {
            xs: 300,
            sm: 360
          },
          height: 52,
          p: '4px',
          borderRadius: '999px',
          overflow: 'hidden',

          background:
            'linear-gradient(180deg,#ffffff,#f7f9fc)',

          border: '1px solid',

          borderColor: 'divider',

          boxShadow:
            '0 10px 35px rgba(34,43,69,.08)',

          transition: '.45s ease'
        }}
      >
        {/* Sliding Background */}

        <Box
          sx={{
            position: 'absolute',
            top: 4,

            left: value ? '50%' : 4,

            width: 'calc(50% - 4px)',

            height: 44,

            borderRadius: '999px',

            background:
              'linear-gradient(135deg,#5B8CFF,#7367F0)',

            transition:
              'all .45s cubic-bezier(.22,1,.36,1)',

            boxShadow:
              '0 12px 25px rgba(91,140,255,.28)'
          }}
        />

        {/* Digital */}

        <Button
          disableRipple
          onClick={() => onChange(false)}
          sx={{
            flex: 1,

            zIndex: 2,

            borderRadius: '999px',

            textTransform: 'none',

            height: '100%',

            transition: '.35s',

            '&:hover': {
              background: 'transparent'
            }
          }}
        >
          <Box
            sx={{
              display: 'flex',

              flexDirection: 'column',

              alignItems: 'center'
            }}
          >
            <Typography
              sx={{
                fontWeight: 700,

                fontSize: 13,

                letterSpacing: '.4px',

                color: value
                  ? 'text.secondary'
                  : '#fff',

                transition: '.35s'
              }}
            >
              Digital Payment
            </Typography>
          </Box>
        </Button>

        {/* Gateway */}

        <Button
          disableRipple
          onClick={() => onChange(true)}
          sx={{
            flex: 1,

            zIndex: 2,

            borderRadius: '999px',

            textTransform: 'none',

            height: '100%',

            '&:hover': {
              background: 'transparent'
            }
          }}
        >
          <Box
            sx={{
              display: 'flex',

              flexDirection: 'column',

              alignItems: 'center'
            }}
          >
            <Typography
              sx={{
                fontWeight: 700,

                fontSize: 13,

                letterSpacing: '.4px',

                color: value
                  ? '#fff'
                  : 'text.secondary',

                transition: '.35s'
              }}
            >
              Payment Gateway
            </Typography>
          </Box>
        </Button>
      </Box>
    </Box>
  )
}

export default PaymentSwitcher