import React, { useState } from 'react';
import { Fab, Tooltip, Box, Typography } from '@mui/material';
import { IoLogoWhatsapp } from 'react-icons/io';

export const WhatsAppButton: React.FC = () => {
  const [hovered, setHovered] = useState(false);
  const phoneNumber = '919999999999'; // Simulated brand WhatsApp contact
  const message = encodeURIComponent(
    'Hi Mani Candles! I am browsing your digital store and would like to inquire about B2C candle delivery or B2B corporate catalogs.'
  );
  const whatsappUrl = `https://wa.me/${phoneNumber}?text=${message}`;

  return (
    <Box
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      sx={{
        position: 'fixed',
        bottom: 24,
        right: { xs: 24, md: 80 }, // Shifted on desktop to make room for the scroll candle
        zIndex: 1000,
        display: 'flex',
        alignItems: 'center',
        gap: 1.5,
      }}
    >
      {hovered && (
        <Box
          sx={{
            backgroundColor: 'background.paper',
            py: 1,
            px: 2,
            borderRadius: 4,
            boxShadow: '0 4px 15px rgba(0,0,0,0.06)',
            border: '1px solid #E6DFD5',
            transition: 'all 0.3s ease',
          }}
        >
          <Typography variant="caption" sx={{ fontWeight: 500, color: 'secondary.main', letterSpacing: '0.05em' }}>
            Inquire on WhatsApp
          </Typography>
        </Box>
      )}
      <Tooltip title="" placement="left">
        <Fab
          color="success"
          href={whatsappUrl}
          target="_blank"
          rel="noopener noreferrer"
          sx={{
            backgroundColor: '#25D366',
            color: '#FFFFFF',
            boxShadow: '0 4px 20px rgba(37, 211, 102, 0.4)',
            '&:hover': {
              backgroundColor: '#128C7E',
              boxShadow: '0 8px 30px rgba(18, 140, 126, 0.6)',
            },
          }}
        >
          <IoLogoWhatsapp size={26} />
        </Fab>
      </Tooltip>
    </Box>
  );
};

export default WhatsAppButton;