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

const messages = [
  'Free complimentary shipping across India on B2C orders above ₹999',
  'Corporate Gifting & Wedding return favors: Custom branding & wholesale prices available',
  'Design your own olfactory signature with our Custom Candle Builder',
  'Sustainable luxury: 100% natural hand-poured soy wax candles'
];

export const AnnouncementBar: React.FC = () => {
  const [currentMessageIndex, setCurrentMessageIndex] = useState(0);
  const [fade, setFade] = useState(true);

  useEffect(() => {
    const rotateInterval = setInterval(() => {
      setFade(false);
      setTimeout(() => {
        setCurrentMessageIndex((prevIndex) => (prevIndex + 1) % messages.length);
        setFade(true);
      }, 500); // match transition duration
    }, 5000);

    return () => clearInterval(rotateInterval);
  }, []);

  return (
    <Box
      sx={{
        backgroundColor: 'secondary.main',
        color: '#F5EFEB',
        py: 0.8,
        px: 2,
        textAlign: 'center',
        position: 'relative',
        zIndex: 1201,
        borderBottom: '1px solid rgba(255, 255, 255, 0.05)'
      }}
    >
      <Typography
        variant="caption"
        sx={{
          display: 'block',
          fontSize: '0.75rem',
          letterSpacing: '0.08em',
          fontWeight: 400,
          textTransform: 'uppercase',
          opacity: fade ? 1 : 0,
          transition: 'opacity 0.5s ease-in-out',
        }}
      >
        {messages[currentMessageIndex]}
      </Typography>
    </Box>
  );
};

export default AnnouncementBar;