import React from "react";
import { Box } from "../Box";
import { SnackbarProviderProps } from "./types";
import { DEFAULT_SNACKBAR_ID } from "./constants";
import { SnackbarContext } from "./context";

export const SnackbarProvider = ({
  component,
  id = DEFAULT_SNACKBAR_ID,
  onClose,
  duration,
  position,
  ...rest
}: SnackbarProviderProps) => {
  const componentId = "snackbar-provider";

  return (
    <SnackbarContext.Provider
      value={{
        id,
        onClose,
        duration,
        position,
      }}
    >
      <Box id={`${componentId}-${id}`} data-component={componentId} {...rest}>
        {component}
      </Box>
    </SnackbarContext.Provider>
  );
};