import React, { useState, useEffect } from 'react';
import { Box, Typography, Button, Slide } from '@mui/material';

export const CookieConsent: React.FC = () => {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const consent = localStorage.getItem('mani_candles_cookie_consent');
    if (!consent) {
      // Show consent after a short delay
      const timer = setTimeout(() => setOpen(true), 2000);
      return () => clearTimeout(timer);
    }
  }, []);

  const handleAccept = () => {
    localStorage.setItem('mani_candles_cookie_consent', 'accepted');
    setOpen(false);
  };

  return (
    <Slide direction="up" in={open} mountOnEnter unmountOnExit>
      <Box
        sx={{
          position: 'fixed',
          bottom: 24,
          left: 24,
          right: 24,
          maxWidth: { xs: 'calc(100% - 48px)', sm: 480 },
          backgroundColor: 'background.paper',
          border: '1px solid #E6DFD5',
          borderRadius: 3,
          boxShadow: '0 8px 30px rgba(0,0,0,0.08)',
          p: 3,
          zIndex: 2000,
          display: 'flex',
          flexDirection: 'column',
          gap: 2,
        }}
      >
        <Typography variant="body2" sx={{ color: 'text.secondary', lineHeight: 1.5 }}>
          We use cookies to elevate your sensory browsing experience, analyze site traffic, and optimize our B2B and B2C services. By accepting, you consent to our privacy terms.
        </Typography>
        <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1.5 }}>
          <Button
            size="small"
            variant="text"
            sx={{ color: 'text.secondary', fontSize: '0.75rem', letterSpacing: '0.05em' }}
            onClick={() => setOpen(false)}
          >
            Decline
          </Button>
          <Button
            size="small"
            variant="contained"
            color="primary"
            sx={{ fontSize: '0.75rem', py: 0.8, px: 2 }}
            onClick={handleAccept}
          >
            Accept & Burn
          </Button>
        </Box>
      </Box>
    </Slide>
  );
};

export default CookieConsent;