// material-ui
import { useTheme } from '@mui/material/styles';
import { Fab, Badge } from '@mui/material';

// project import

// assets

// ==============================|| CART ITEMS - FLOATING BUTTON ||============================== //

const FloatingCart = ({ element, count = 0, onClick, sx }) => {
  const theme = useTheme();

  // const cart = useSelector((state) => state.cart);
  // const totalQuantity = sum(cart.checkout.products.map((item) => item.quantity));

  return (
    <Fab
      // component={Link}
      // to="/apps/e-commerce/checkout"
      onClick={onClick} // ← important
      size="large"
      sx={{
        top: '75%',
        position: 'fixed',
        right: 0,
        zIndex: theme.zIndex.speedDial,
        boxShadow: theme.customShadows.primary,
        bgcolor: 'primary.lighter',
        color: 'primary.main',
        borderRadius: '25%',
        borderTopRightRadius: 0,
        borderBottomRightRadius: 0,
        '&:hover': {
          bgcolor: 'primary.100',
          boxShadow: theme.customShadows.primary
        },
        '&:focus-visible': {
          outline: `2px solid ${theme.palette.primary.dark}`,
          outlineOffset: 2
        },
        ...sx
      }}
    >
      <Badge showZero badgeContent={count} color="error">
        {element}
      </Badge>
    </Fab>
  );
};

export default FloatingCart;
