'use client'

import {useState} from 'react'
import {Box, Container, Typography, Paper} from '@mui/material'

import PaymentMethod from '../../components/soutyen/payment-method'
import Presantasyon from '../../components/soutyen/presantasyon'

export default function Sipote() {
  const [paymentMethod, setPaymentMethod] = useState(0)

  return (
    <Box sx={{display: 'flex', marginTop: 3, flexDirection: 'column', minHeight: '100vh'}}>
      <Box sx={{flexGrow: 1, marginBottom: 10}}>
        <Container>
          <Typography gutterBottom sx={{fontWeight: 'bold'}} textAlign='center' variant='h4' component='h1'>
            Soutenir Organisation KA Internationale !
          </Typography>
          <Paper sx={{padding: 2, marginTop: 3}}>
            <Box sx={{textAlign: 'center'}}>
              <PaymentMethod
                paymentMethod={paymentMethod}
                setPaymentMethod={setPaymentMethod}
              />
            </Box>
          </Paper>
          <Presantasyon />
        </Container>
      </Box>
    </Box>
  )
}