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

const NoProdectDash = () => {
    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,
                    mt:10,
                    pl: 1,
                    pr: { xs: 1, sm: 3 },
                    flexDirection: { xs: 'column', sm: 'row', md: 'row' },
                    gap: { xs: 2, sm: 0 }
                }}
            >
        
            </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 is no campaign available.
                        Please initiate the {'\n'}creation of a new campaign.
                    </Typography>

                    {/* Action Button */}
                    <Button
                        variant="contained"
                        startIcon={<AddIcon />}
                        sx={{
                            textTransform: 'none',
                            px: 4,
                            py: 1.5,
                            fontSize: '13px',
                            fontWeight: 500,
                            borderRadius: 2,
                            color:'white',
                            width:179
                        }}
                    >
                        Add a Product
                    </Button>
                </CardContent>
            </Card>
        </>
    );
};

export default NoProdectDash;