RestaurantDash/src/components/SidePanel.js

import React, { useState, useEffect } from 'react';


import {
    Button,
    Typography,
    Stack,
    Box
} from '@mui/material';

import ArrowForwardIcon from '@mui/icons-material/ArrowForward';  // استيراد أيقونة السهم

const SidePanel = ({ setMode, mode }) => {
    const [currentSlide, setCurrentSlide] = useState(0);

    const slides = [
        {
            image: '/images/waitress3.png',
            title: "Welcome to our cutting-edge postal application,",
            description: "Welcome to our cutting-edge postal application, where sending and receiving mail has never been more convenient and efficient."
        },
        {
            image: '/images/waitress3.png',
            title: "Second Slide Title",
            description: "Welcome to our cutting-edge postal application, where sending and receiving mail has never been more convenient and efficient."
        },
        {
            image: '/images/waitress3.png',
            title: "Third Slide Title",
            description: "Welcome to our cutting-edge postal application, where sending and receiving mail has never been more convenient and efficient."
        },
        {
            image: '/images/waitress3.png',
            title: "Fourth Slide Title",
            description: "Welcome to our cutting-edge postal application, where sending and receiving mail has never been more convenient and efficient."
        }
    ];

    useEffect(() => {
        const interval = setInterval(() => {
            setCurrentSlide((prev) => (prev + 1) % slides.length);
        }, 5000);
        return () => clearInterval(interval);
    }, [slides.length]);

    return (
        <Box
            flex={1}
            padding={2}
            sx={{
                display: { xs: "none", sm: "block" },
                position: 'sticky',
                height: 'calc(102vh - 40px)', // لضمان ملاءمته للشاشة
            }}
        >

            <Stack spacing={2} sx={{ width: '100%', height: '100%' }}>
                <Box
                    sx={{
                        width: '100%',
                        height: '100vh',
                        position: 'relative',
                        overflow: 'hidden',
                        borderRadius: '20px',

                    }}
                >
                    {/* الصورة الحالية */}
                    <img
                        src={slides[currentSlide].image}
                        alt={`Slide ${currentSlide + 1}`}
                        style={{
                            width: '100%',
                            height: '100%',
                            objectFit: 'cover',
                            display: 'block'
                        }}
                    />

                    {/* مربع النص في الأسفل */}
                    <Box
                        sx={{
                            position: 'absolute',
                            bottom: 0,
                            left: 0,
                            width: '100%',
                            height: {
                                md: '37vh',  // الافتراضي للشاشات الصغيرة
                                // xs: '5vh',
                                sm: '42vh',// عندما تكون الشاشة متوسطة أو أكبر
                                lg: '31vh',   // من 1200px إلى أقل من 1536px
                             
                            },

                            bgcolor: 'rgba(0, 0, 0, 0.2)',
                            color: 'white',
                            borderBottomLeftRadius: '20px',
                            borderBottomRightRadius: '20px',
                            p: 3,
                            boxSizing: 'border-box',
                            boxShadow: '0px -40px 20px rgba(0, 0, 0, 0.2)',
                            display: 'flex',
                            flexDirection: 'column',
                            justifyContent: 'flex-start',
                            alignItems: 'flex-start',
                        }}
                    >
                        <Button
                            variant="contained"
                            size="small"
                            onClick={() => window.open('https://www.google.com', '_blank')}
                            sx={{

                                mb: 1,
                                bgcolor: 'rgba(255, 255, 255, 0.24)',
                                color: 'white',
                                textTransform: 'none',
                                borderRadius: '12px',  // زاوية منحنية
                                display: 'flex', // لتوزيع الأيقونة والنص بشكل أفقي
                                alignItems: 'center',  // لضبط الأيقونة والنص في المنتصف
                                padding: '6px 20px',  // يمكن تعديل المسافة حول النص والأيقونة
                                borderRadius: '50px',
                                fontSize: '16px',
                                fontWeight: 500,
                                marginBottom: '20px'
                            }}

                        >
                            Plus
                            {/* إضافة أيقونة السهم مع تعديل زاوية الدوران */}
                            <ArrowForwardIcon sx={{ ml: 1, transform: 'rotate(-45deg)' }} /> {/* تعديل زاوية السهم */}
                        </Button>

                        <Typography
                            sx={{
                                wordBreak: 'break-word',
                                fontSize: '120%',
                                fontWeight: 400,
                            }}
                        >
                            {slides[currentSlide].description}
                        </Typography>
                    </Box>

                    {/* مؤشرات الشرائح */}
                    <Box
                        sx={{
                            position: 'absolute',
                            bottom: '1vh',  // جعل المؤشرات تحت النص
                            left: '50%',
                            transform: 'translateX(-50%)',
                            display: 'flex',
                            gap: 1,
                            width: '100%',
                            justifyContent: 'center', // تأكد من أن المؤشرات تأخذ عرض الصورة بالكامل
                        }}
                    >
                        {slides.map((_, index) => (
                            <Box
                                key={index}
                                sx={{
                                    width: '20%',
                                    height: 5,
                                    bgcolor: index === currentSlide ? 'white' : 'rgba(255, 255, 255, 0.5)',
                                    borderRadius: 2,
                                    cursor: 'pointer',
                                    transition: 'background-color 0.3s',
                                }}
                                onClick={() => setCurrentSlide(index)}
                            />
                        ))}
                    </Box>
                </Box>
            </Stack>
            <Box position="fixed">

            </Box>
        </Box>
    )
}

export default SidePanel;