Сделай дизайн очень удобным с любого типа устройств в стиле apple: import React, { useState } from 'react';
import {
    Dialog,
    DialogTitle,
    DialogContent,
    DialogActions,
    Button,
    Switch,
    TextField,
    FormControlLabel,
    Grid,
    Divider,
    Typography,
    Box,
    Stack
} from '@mui/material';
import ThemeToggle from '../components/ThemeToggle';

const Settings = ({ open, onClose }) => {
    const [settings, setSettings] = useState({
        nickname: localStorage.getItem('nickname') || '',
        disableRewind: JSON.parse(localStorage.getItem('disableRewind')) || false,
        darkTheme: JSON.parse(localStorage.getItem('darkTheme')) || false,
        muteNotifications: JSON.parse(localStorage.getItem('muteNotifications')) || false,
        isPublic: JSON.parse(localStorage.getItem('isPublic')) || false,
    });

    const handleChange = (event) => {
        const { name, value, checked } = event.target;
        setSettings(prev => ({ ...prev, [name]: name === 'nickname' ? value : checked }));
    };

    const handleSave = () => {
        Object.entries(settings).forEach(([key, value]) => {
            localStorage.setItem(key, JSON.stringify(value));
        });
        onClose();
    };

    return (
        <Dialog
            open={open}
            onClose={onClose}
            fullWidth
            maxWidth="sm"
            sx={{
                '& .MuiDialog-paper': {
                    borderRadius: 2,
                    padding: 2,
                }
            }}
        >
            {/* Заголовок и Переключатель темы */}
            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
                <DialogTitle sx={{ m: 0, pr: 2 }}>Настройки</DialogTitle>
                <ThemeToggle />
            </Box>

            <Divider sx={{ mb: 2 }} />

            {/* Контент Настроек */}
            <DialogContent dividers>
                <Stack spacing={3}>
                    {/* Никнейм */}
                    <Box>
                        <TextField
                            autoFocus
                            name="nickname"
                            label="Никнейм"
                            type="text"
                            fullWidth
                            variant="outlined"
                            value={settings.nickname}
                            onChange={handleChange}
                        />
                    </Box>

                    {/* Основные Настройки */}
                    <Box>
                        <Typography variant="subtitle1" gutterBottom>
                            Основные настройки
                        </Typography>
                        <Stack spacing={1}>
                            <FormControlLabel
                                control={
                                    <Switch
                                        checked={settings.disableRewind}
                                        onChange={handleChange}
                                        name="disableRewind"
                                        color="primary"
                                    />
                                }
                                label="Запретить перемотку видео другим"
                            />
                            <FormControlLabel
                                control={
                                    <Switch
                                        checked={settings.muteNotifications}
                                        onChange={handleChange}
                                        name="muteNotifications"
                                        color="primary"
                                    />
                                }
                                label="Отключить звук уведомлений"
                            />
                            <FormControlLabel
                                control={
                                    <Switch
                                        checked={settings.isPublic}
                                        onChange={handleChange}
                                        name="isPublic"
                                        color="primary"
                                    />
                                }
                                label="Публичный доступ"
                            />
                        </Stack>
                    </Box>
                </Stack>
            </DialogContent>

            <Divider />

            {/* Кнопки действий */}
            <DialogActions sx={{ mt: 2, px: 3 }}>
                <Button onClick={onClose} color="secondary" variant="outlined">
                    Отмена
                </Button>
                <Button onClick={handleSave} variant="contained" color="primary">
                    Сохранить
                </Button>
            </DialogActions>
        </Dialog>
    );
};

export default Settings;