import React from 'react';
import { Box, Button, Card, CardContent, Stack, Typography, useMediaQuery } from '@mui/material';
import AirportShuttleIcon from '@mui/icons-material/AirportShuttle';
import CampaignIcon from '@mui/icons-material/Campaign';
import Inventory2Icon from '@mui/icons-material/Inventory2';
import DeveloperBoardIcon from '@mui/icons-material/DeveloperBoard';
import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward';
import { useTheme } from '@mui/material/styles';
import AddIcon from '@mui/icons-material/Add';


const IconCircle = ({ children, bgColor = '#DEDEFA', outerColor = '#EFEFFD' }) => (
    <Box
        sx={{
            position: 'relative',
            width: { xs: 40, sm: 45, md: 50 },
            height: { xs: 43, sm: 48, md: 53 },
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
        }}
    >
        <Box
            sx={{
                position: 'absolute',
                width: { xs: 32, sm: 36, md: 40 },
                height: { xs: 35, sm: 39, md: 43 },
                borderRadius: '50%',
                top: '50%',
                left: '50%',
                transform: 'translate(-50%, -50%)',
                backgroundColor: outerColor,
                zIndex: 0,
            }}
        />
        <Box
            sx={{
                width: { xs: 24, sm: 27, md: 30 },
                height: { xs: 27, sm: 30, md: 33 },
                backgroundColor: bgColor,
                borderRadius: '50%',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                zIndex: 1,
            }}
        >
            {children}
        </Box>
    </Box>
);

const StatusCard = ({
    icon,
    statusText,
    statusColor,
    iconColor,
    outerColor,
    innerColor,
    height = {
        xs: 'calc(140px + 0.5vh)',
        sm: 'calc(150px + 0.5vh)',
        md: 'calc(162px + 0.5vh)'
    },
    width = {
        xs: 'min(90%, 600px)', // تقليل من 90% إلى 85% والحد الأقصى من 300px إلى 280px
        sm: 'clamp(220px, 23vw, 280px)', // تقليل جميع القيم
        md: 'clamp(220px, 19vw, 300px)'
    },
    transition = 'width 0.3s ease',
    iconSpacing = { xs: 6, sm: 8, md: 12 },
    extraButton,
    statusButtonWidth,
    title = 'Point Of Sale',
}) => {
    const theme = useTheme();
    const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));

    return (
        <Card sx={{
            height,
            width,
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-between',
            p: 0,
            pb: 2,
            borderRadius: '8px',
            boxShadow: 'none',
            minWidth: { xs: 180, sm: 220 }
        }}>
            <CardContent>
                <Box sx={{ display: 'flex', alignItems: 'center', gap: iconSpacing }}>
                    <IconCircle bgColor={innerColor} outerColor={outerColor}>
                        {React.cloneElement(icon, { sx: { color: iconColor, fontSize: { xs: 16, sm: 18, md: 20 } } })}
                    </IconCircle>
                    <Button
                        variant="contained"
                        sx={{
                            backgroundColor: '#E7F4EE',
                            color: statusColor,
                            textTransform: 'none',
                            boxShadow: 'none',
                            borderRadius: '100px',
                            width: statusButtonWidth || 'auto',
                            fontSize: { xs: '0.7rem', sm: '0.8rem', md: '0.9rem' },
                            px: { xs: 1, sm: 1.5 },
                            py: 0.5
                        }}
                    >
                        {statusText}
                    </Button>
                </Box>

                <Typography
                    variant="h6"
                    gutterBottom
                    mt={1.5}
                    sx={{
                        color: '#667085',
                        fontSize: { xs: '14px', sm: '15px', md: '16px' },
                        fontWeight: 500
                    }}
                >
                    {title}
                </Typography>

                <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mt: 2 }}>
                    {extraButton ? extraButton : <Box />}
                    <Button
                        variant="contained"
                        sx={{
                            backgroundColor: '#F7F7F7',
                            width: { xs: '26px', sm: '28px', md: '30px' },
                            height: { xs: '26px', sm: '28px', md: '30px' },
                            minWidth: '0',
                            padding: 0,
                            borderRadius: '12px',
                            boxShadow: 'none',
                            '&:hover': {
                                backgroundColor: '#e0e0e0',
                            },
                        }}
                    >
                        <ArrowOutwardIcon
                            sx={{
                                color: theme.palette.primary.main,
                                width: { xs: '16px', sm: '18px', md: '20px' },
                                height: { xs: '16px', sm: '18px', md: '20px' },
                            }}
                        />
                    </Button>
                </Box>
            </CardContent>
        </Card>
    );
};

const PostSubmission = () => {
    const theme = useTheme();
    const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
    const isMediumScreen = useMediaQuery(theme.breakpoints.between('sm', 'md'));

    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 }
                }}
            >
                {/* Title */}
                <Typography
                    variant="h6"
                    sx={{
                        fontWeight: '500',
                        fontSize: { xs: '20px', sm: '22px', md: '24px' },
                        color: '#121212'
                    }}
                >
                    Post Submission
                </Typography>

                {/* Buttons */}
                <Box sx={{
                    display: 'flex',
                    gap: { xs: 1, sm: 2 },
                    flexWrap: { xs: 'wrap', sm: 'nowrap' },
                    width: { xs: '100%', sm: 'auto' },
                    justifyContent: { xs: 'space-between', sm: 'space-between', md: 'flex-end' }
                }}>
                    <Button
                        variant="contained"
                        sx={{
                            textTransform: 'none',
                            color: 'white',
                            backgroundColor: theme.palette.primary.main,
                            boxShadow: 'none',
                            borderRadius: '8px',
                            height: '40px',
                            width: { xs: '48%', sm: '130px', md: '100px' },
                            fontSize: { xs: '12px', sm: '13px', md: '14px' },
                            fontWeight: 600,
                            p: 0,
                            m: 0,
                            whiteSpace: 'nowrap',
                            minWidth: 'unset'
                        }}
                    >
                       
                        {!isSmallScreen && 'Interested'}
                    </Button>
             
                </Box>
            </Box>


        </>
    );
};

export default PostSubmission;