import React from 'react';
import {
    Box,
    Button,
    Card,
    CardContent,
    Typography,
    useMediaQuery
} from '@mui/material';
import { useTheme } from '@mui/material/styles';


const NoTraining = () => {
    const theme = useTheme();
    const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));

    return (
        <>
            {/* Header Section */}
            <Box
                sx={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: { xs: 'flex-start', sm: 'center', md: 'center' },
                    mb: 3,
                    pl: 1,
                    pr: { xs: 1, sm: 3 },
                    flexDirection: { xs: 'column', sm: 'row', md: 'row' },
                    gap: { xs: 2, sm: 0 }
                }}
            >
                <Typography
                    variant="h6"
                    sx={{
                        fontWeight: '500',
                        fontSize: { xs: '20px', sm: '22px', md: '24px' },
                        color: '#121212'
                    }}
                >
                    Dashboard
                </Typography>
            </Box>

            {/* Empty State Content */}
            <Card
                sx={{
                    boxShadow: 'none',
                    p: 4,
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    justifyContent: 'center',
                    textAlign: 'center',
                    backgroundColor: 'transparent'
                }}
            >
                <CardContent>
                    {/* Image Placeholder */}
                    <Box
                        component="img"
                        src="/images/compeoter.png"
                        alt="No products available"
                        sx={{
                            width: isSmallScreen ? 150 : 200,
                            height: 'auto',
                            mb: 1,
                            opacity: 0.8
                        }}
                    />

                    {/* Title with colored "Sorry!" */}
                    <Typography
                        variant="h5"
                        sx={{
                            fontWeight: 400,
                            fontSize: { xs: '14px', md: '18px' },
                            mb: 2,
                            color: '#5F6868',
                            whiteSpace: 'pre-line' // هذا يسمح بكسر السطر عند المسافات
                        }}
                    >
                        <Box component="span" sx={{ fontWeight: 600, fontSize: '18px' }}>Sorry!</Box>{' '}
                        There are no updates now.. 
                       {'\n'}check back later.
                    </Typography>

                    {/* Action Button */}
                  
                </CardContent>
            </Card>
        </>
    );
};

export default NoTraining;