E-Commerce-Module/frontend/src/components/CookieSettingsButton.jsx

import React, { useState } from 'react';
import { Button, IconButton, Tooltip, Dialog, DialogTitle, DialogContent, 
  DialogActions, Typography, Box, Divider, RadioGroup, Radio, FormControlLabel, 
  FormControl, FormLabel } from '@mui/material';
import CookieIcon from '@mui/icons-material/Cookie';
import consentService, { CONSENT_LEVELS } from '../services/consentService';

/**
 * Button to open cookie settings dialog
 * Can be placed in the footer or other accessible areas of the app
 */
const CookieSettingsButton = ({ variant = 'text', icon = false, label = 'Cookie Settings' }) => {
  const [open, setOpen] = useState(false);
  const [consentLevel, setConsentLevel] = useState(() => {
    const storedConsent = consentService.getStoredConsent();
    return storedConsent?.level || CONSENT_LEVELS.NECESSARY;
  });

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  const handleConsentLevelChange = (event) => {
    setConsentLevel(event.target.value);
  };

  const handleSave = () => {
    consentService.saveConsent(consentLevel);
    setOpen(false);
  };

  const handleAcceptAll = () => {
    const allConsent = CONSENT_LEVELS.ALL;
    setConsentLevel(allConsent);
    consentService.saveConsent(allConsent);
    setOpen(false);
  };

  const handleNecessaryOnly = () => {
    const necessaryOnly = CONSENT_LEVELS.NECESSARY;
    setConsentLevel(necessaryOnly);
    consentService.saveConsent(necessaryOnly);
    setOpen(false);
  };

  // Render as icon button or regular button
  if (icon) {
    return (
      <>
        <Tooltip title={label}>
          <IconButton onClick={handleOpen} size="small" color="inherit">
            <CookieIcon fontSize="small" />
          </IconButton>
        </Tooltip>
        {renderDialog()}
      </>
    );
  }

  return (
    <>
      <Button variant={variant} size="small" onClick={handleOpen}>
        {label}
      </Button>
      {renderDialog()}
    </>
  );

  function renderDialog() {
    return (
      <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
        <DialogTitle>
          <Box sx={{ display: 'flex', alignItems: 'center' }}>
            <CookieIcon sx={{ mr: 1 }} />
            Cookie Settings
          </Box>
        </DialogTitle>
        <DialogContent>
          <Typography variant="body2" paragraph>
            We use cookies to enhance your browsing experience, provide personalized content, 
            and analyze our traffic. You can adjust your privacy settings below.
          </Typography>
          
          <Divider sx={{ my: 2 }} />
          
          <FormControl component="fieldset" sx={{ width: '100%' }}>
            <FormLabel component="legend">Privacy Settings</FormLabel>
            <RadioGroup
              value={consentLevel}
              onChange={handleConsentLevelChange}
            >
              <FormControlLabel 
                value={CONSENT_LEVELS.NECESSARY} 
                control={<Radio />} 
                label={
                  <Box>
                    <Typography variant="body1">Necessary Cookies Only</Typography>
                    <Typography variant="body2" color="text.secondary">
                      Essential cookies required for basic website functionality. These cannot be disabled.
                    </Typography>
                  </Box>
                } 
              />
              <FormControlLabel 
                value={CONSENT_LEVELS.FUNCTIONAL} 
                control={<Radio />} 
                label={
                  <Box>
                    <Typography variant="body1">Functional Cookies</Typography>
                    <Typography variant="body2" color="text.secondary">
                      Cookies that remember your preferences and enhance website functionality.
                    </Typography>
                  </Box>
                } 
              />
              <FormControlLabel 
                value={CONSENT_LEVELS.ANALYTICS} 
                control={<Radio />} 
                label={
                  <Box>
                    <Typography variant="body1">Analytics Cookies</Typography>
                    <Typography variant="body2" color="text.secondary">
                      Cookies that help us understand how you use our website and improve your experience.
                      This includes Microsoft Clarity for analyzing site usage patterns.
                    </Typography>
                  </Box>
                } 
              />
              <FormControlLabel 
                value={CONSENT_LEVELS.ALL} 
                control={<Radio />} 
                label={
                  <Box>
                    <Typography variant="body1">All Cookies</Typography>
                    <Typography variant="body2" color="text.secondary">
                      Accept all cookies including analytics, marketing, and third-party cookies.
                    </Typography>
                  </Box>
                } 
              />
            </RadioGroup>
          </FormControl>
          
          <Divider sx={{ my: 2 }} />
          
          <Typography variant="caption" color="text.secondary">
            You can change these settings at any time by clicking on the Cookie Settings link in the footer.
          </Typography>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleNecessaryOnly} color="inherit">Necessary Only</Button>
          <Box sx={{ flexGrow: 1 }} />
          <Button onClick={handleClose}>Cancel</Button>
          <Button onClick={handleSave} variant="contained">Save Preferences</Button>
          <Button onClick={handleAcceptAll} variant="outlined">Accept All</Button>
        </DialogActions>
      </Dialog>
    );
  }
};

export default CookieSettingsButton;