import React from 'react'
import Grid from '@mui/material/Grid'
import { Box } from '@mui/system'
import { Skeleton, Divider, CardContent } from '@mui/material'

export default function RegionalSkeleton() {
    return (
        <div>
            <Grid container spacing={2.5}  className="reginal_offices">
                <Grid item xs={12} sm={12} md={4}>
                    <Box sx={{ boxShadow: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px", borderRadius: '6px',margin:'16px 0px' }}>
                        <CardContent>
                            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
                                <Box>
                                    <Skeleton animation='wave' width={90} />
                                </Box>
                                <Box sx={{ display: 'flex' }}>
                                    <Box>
                                        <Skeleton animation='wave' width={30} />
                                    </Box>
                                    <Box>
                                        <Skeleton animation='wave' width={20} sx={{ ml: 1 }} />
                                    </Box>
                                </Box>
                            </Box>
                            <Divider />
                            <Box sx={{ display: 'flex', mb: 2, mt: 2 }}>
                                <Box>
                                    <Skeleton animation='wave' width={90} />
                                </Box>
                                <Box>
                                    <Skeleton animation='wave' width={100} sx={{ ml: 10 }} />
                                </Box>
                            </Box>
                            <Divider />
                            <Box sx={{ display: 'flex', mb: 2, mt: 2 }}>
                                <Box>
                                    <Skeleton animation='wave' width={90} />
                                </Box>
                                <Box>
                                    <Skeleton animation='wave' width={100} sx={{ ml: 10 }} />
                                </Box>
                            </Box>
                            <Divider />
                            <Box sx={{ display: 'flex', mb: 2, mt: 2 }}>
                                <Box>
                                    <Skeleton animation='wave' width={90} />
                                </Box>
                                <Box>
                                    <Skeleton animation='wave' width={170} sx={{ ml: 10 }} />
                                </Box>
                            </Box>
                            <Divider />
                            <Box sx={{ display: 'flex', mb: 2, mt: 2 }}>
                                <Box>
                                    <Skeleton animation='wave' width={90} />
                                </Box>
                                <Box>
                                    <Skeleton animation='wave' width={200} sx={{ ml: 10 }} />
                                </Box>
                            </Box>
                            <Divider />
                        </CardContent>
                    </Box>
                </Grid>
                <Grid item xs={12} sm={12} md={4}>
                    <Box sx={{ boxShadow: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px", borderRadius: '6px',margin:'16px 0px' }}>
                        <CardContent>
                            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
                                <Box>
                                    <Skeleton animation='wave' width={90} />
                                </Box>
                                <Box sx={{ display: 'flex' }}>
                                    <Box>
                                        <Skeleton animation='wave' width={30} />
                                    </Box>
                                    <Box>
                                        <Skeleton animation='wave' width={20} sx={{ ml: 1 }} />
                                    </Box>
                                </Box>
                            </Box>
                            <Divider />
                            <Box sx={{ display: 'flex', mb: 2, mt: 2 }}>
                                <Box>
                                    <Skeleton animation='wave' width={90} />
                                </Box>
                                <Box>
                                    <Skeleton animation='wave' width={100} sx={{ ml: 10 }} />
                                </Box>
                            </Box>
                            <Divider />
                            <Box sx={{ display: 'flex', mb: 2, mt: 2 }}>
                                <Box>
                                    <Skeleton animation='wave' width={90} />
                                </Box>
                                <Box>
                                    <Skeleton animation='wave' width={100} sx={{ ml: 10 }} />
                                </Box>
                            </Box>
                            <Divider />
                            <Box sx={{ display: 'flex', mb: 2, mt: 2 }}>
                                <Box>
                                    <Skeleton animation='wave' width={90} />
                                </Box>
                                <Box>
                                    <Skeleton animation='wave' width={170} sx={{ ml: 10 }} />
                                </Box>
                            </Box>
                            <Divider />
                            <Box sx={{ display: 'flex', mb: 2, mt: 2 }}>
                                <Box>
                                    <Skeleton animation='wave' width={90} />
                                </Box>
                                <Box>
                                    <Skeleton animation='wave' width={200} sx={{ ml: 10 }} />
                                </Box>
                            </Box>
                            <Divider />
                        </CardContent>
                    </Box>
                </Grid>
                <Grid item xs={12} sm={12} md={4}>
                    <Box sx={{ boxShadow: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px", borderRadius: '6px',margin:'16px 0px' }}>
                        <CardContent>
                            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
                                <Box>
                                    <Skeleton animation='wave' width={90} />
                                </Box>
                                <Box sx={{ display: 'flex' }}>
                                    <Box>
                                        <Skeleton animation='wave' width={30} />
                                    </Box>
                                    <Box>
                                        <Skeleton animation='wave' width={20} sx={{ ml: 1 }} />
                                    </Box>
                                </Box>
                            </Box>
                            <Divider />
                            <Box sx={{ display: 'flex', mb: 2, mt: 2 }}>
                                <Box>
                                    <Skeleton animation='wave' width={90} />
                                </Box>
                                <Box>
                                    <Skeleton animation='wave' width={100} sx={{ ml: 10 }} />
                                </Box>
                            </Box>
                            <Divider />
                            <Box sx={{ display: 'flex', mb: 2, mt: 2 }}>
                                <Box>
                                    <Skeleton animation='wave' width={90} />
                                </Box>
                                <Box>
                                    <Skeleton animation='wave' width={100} sx={{ ml: 10 }} />
                                </Box>
                            </Box>
                            <Divider />
                            <Box sx={{ display: 'flex', mb: 2, mt: 2 }}>
                                <Box>
                                    <Skeleton animation='wave' width={90} />
                                </Box>
                                <Box>
                                    <Skeleton animation='wave' width={170} sx={{ ml: 10 }} />
                                </Box>
                            </Box>
                            <Divider />
                            <Box sx={{ display: 'flex', mb: 2, mt: 2 }}>
                                <Box>
                                    <Skeleton animation='wave' width={90} />
                                </Box>
                                <Box>
                                    <Skeleton animation='wave' width={200} sx={{ ml: 10 }} />
                                </Box>
                            </Box>
                            <Divider />
                        </CardContent>
                    </Box>
                </Grid>
            </Grid>
        </div>
    )
}