import React from 'react';
import { Box, Typography, Stack, Button, useTheme, TextField } from '@mui/material';

const OperationalCapacity = ({ currentStepIndex = 0, onNext, onBack }) => {
    const theme = useTheme();

    return (
        <Box
            sx={{
                height: { xs: '90%', sm: '100%', md:740 },
                backgroundColor: '#FFFFFF',
                px: 4,
                pt: {xs:4,md:12},
                pb: 4,
                display: 'block',
                borderRadius: 2,
                boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
                position: 'relative',
                width: { xs: '85%', sm: '90%' },
            }}
        >
            <Stack spacing={2.5}>
                <Typography
                    fontWeight={700}
                    sx={{
                        fontSize: {
                            xs: '1.8rem',
                            sm: '2rem',
                            md: '2.2rem'
                        }
                    }}
                >
                    Operational Capacity
                </Typography>
                <Box sx={{ width: '70%' }}>
                    <Typography
                        fontSize="16px"
                        color="text.secondary"
                        fontWeight={500}
                        sx={{ pb: 1 }}
                    >
                        Enter your basic information to proceed to registration of your own restaurant on this platform
                    </Typography>
                </Box>

                {/* Maximum Orders Per Day Input */}
                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                    <Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
                        Maximum Orders Per Day
                    </Typography>
                    <TextField
                        placeholder="5000"
                        variant="outlined"
                        fullWidth
                        sx={{
                            '& input': { fontWeight: 500, fontSize: '15px' },
                            '& input::placeholder': { color: '#969BA7' },
                            '& .MuiOutlinedInput-root': {
                                borderRadius: '10px',
                                transition: '0.3s',
                                '&.Mui-focused fieldset': {
                                    borderColor: theme.palette.primary.main,
                                    boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
                                }
                            },
                            '& .MuiOutlinedInput-root.Mui-focused': {
                                borderColor: '#3f51b5',
                                boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
                            }
                        }}
                    />
                </Box>

                {/* Number of Cheff Input */}
                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                    <Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
                        Number of Cheff
                    </Typography>
                    <TextField
                        placeholder="20"
                        variant="outlined"
                        fullWidth
                        sx={{
                            '& input': { fontWeight: 500, fontSize: '15px' },
                            '& input::placeholder': { color: '#969BA7' },
                            '& .MuiOutlinedInput-root': {
                                borderRadius: '10px',
                                transition: '0.3s',
                                '&.Mui-focused fieldset': {
                                    borderColor: theme.palette.primary.main,
                                    boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
                                }
                            },
                            '& .MuiOutlinedInput-root.Mui-focused': {
                                borderColor: '#3f51b5',
                                boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
                            }
                        }}
                    />
                </Box>

                {/* Number of Waiters Input */}
                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                    <Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
                        Number of Waiters
                    </Typography>
                    <TextField
                        placeholder="200"
                        variant="outlined"
                        fullWidth
                        sx={{
                            '& input': { fontWeight: 500, fontSize: '15px' },
                            '& input::placeholder': { color: '#969BA7' },
                            '& .MuiOutlinedInput-root': {
                                borderRadius: '10px',
                                transition: '0.3s',
                                '&.Mui-focused fieldset': {
                                    borderColor: theme.palette.primary.main,
                                    boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
                                }
                            },
                            '& .MuiOutlinedInput-root.Mui-focused': {
                                borderColor: '#3f51b5',
                                boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
                            }
                        }}
                    />
                </Box>

                {/* Number of Kitchen Assistant Input */}
                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                    <Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
                        Number of Kitchen Assistant
                    </Typography>
                    <TextField
                        placeholder="200"
                        variant="outlined"
                        fullWidth
                        sx={{
                            '& input': { fontWeight: 500, fontSize: '15px' },
                            '& input::placeholder': { color: '#969BA7' },
                            '& .MuiOutlinedInput-root': {
                                borderRadius: '10px',
                                transition: '0.3s',
                                '&.Mui-focused fieldset': {
                                    borderColor: theme.palette.primary.main,
                                    boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
                                }
                            },
                            '& .MuiOutlinedInput-root.Mui-focused': {
                                borderColor: '#3f51b5',
                                boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
                            }
                        }}
                    />
                </Box>

                {/* Buttons */}
   
                  <Box sx={{ pt: 2 }}>
                                       <Button
                                           variant="contained"
                                           fullWidth
                                           onClick={onNext}
                                           sx={{
                                               fontFamily: 'PlusJakartaSans',
                                               fontWeight: 600,
                                               fontSize: { xs: '14px', sm: '16px' },
                                               height: { xs: '45px', sm: '52px' },
                                               borderRadius: '50px',
                                               textTransform: 'none',
                                               color: 'white',
                                               backgroundColor: theme.palette.primary.main,
                                               '&:hover': {
                                                   backgroundColor: theme.palette.primary.hover,
                                               },
                                           }}
                                       >
                                           Next
                                       </Button>
               
                                       {/* زر Back تحت زر Next */}
                                       <Button
                                           variant="outlined"
                                           fullWidth
                                           onClick={onBack}
                                           sx={{
                                               mt: 2,
                                               fontFamily: 'PlusJakartaSans',
                                               fontWeight: 600,
                                               fontSize: { xs: '14px', sm: '16px' },
                                               height: { xs: '45px', sm: '52px' },
                                               borderRadius: '50px',
                                               textTransform: 'none',
                                               display: { xs: 'block', sm: 'block', md: 'none' }, // يظهر فقط في xs و sm
                                               borderColor: theme.palette.primary.main,
                                               color: theme.palette.primary.main,
                                               '&:hover': {
                                                   backgroundColor: theme.palette.primary.light,
                                                   borderColor: theme.palette.primary.main,
                                               },
                                           }}
                                       >
                                           Back
                                       </Button>
                                   </Box>
   
            </Stack>
        </Box>
    );
};

export default OperationalCapacity;