import React, { useState } from 'react';
import {
  Fab,
  Tooltip,
  useScrollTrigger,
  Zoom
} from '@mui/material';
import {
  Cookie as CookieIcon
} from '@mui/icons-material';
import CookieSettings from './CookieSettings';

const CookieFloatingButton = () => {
  const [showSettings, setShowSettings] = useState(false);
  
  const trigger = useScrollTrigger({
    disableHysteresis: true,
    threshold: 100,
  });

  return (
    <>
      <Zoom in={trigger}>
        <Tooltip title="Configuración de Cookies" placement="left">
          <Fab
            color="primary"
            size="small"
            onClick={() => setShowSettings(true)}
            sx={{
              position: 'fixed',
              bottom: 16,
              right: 16,
              zIndex: 1000,
              backgroundColor: '#2f70aa',
              '&:hover': {
                backgroundColor: '#245d8f',
              }
            }}
          >
            <CookieIcon />
          </Fab>
        </Tooltip>
      </Zoom>

      <CookieSettings 
        open={showSettings}
        onClose={() => setShowSettings(false)}
        onSave={() => {
          setShowSettings(false);
        }}
      />
    </>
  );
};

export default CookieFloatingButton;
