import React, { createContext } from "react";
import { ConfigProvider, message } from "antd";
import "./App.css";
import HeaderComponent from "./components/HeaderComponent";
import { theme } from "./config/style";
import { Provider } from "react-redux";
import { store } from "./config/store";
import { MessageInstance } from "antd/es/message/interface";

export const MessageContext = createContext({} as MessageInstance);

const App = () => {
  const [messageApi, contextHolder] = message.useMessage({
    duration: 2,
  });
  return (
    <Provider store={store}>
      <ConfigProvider theme={theme}>
        <MessageContext.Provider value={messageApi}>
          <div className="content">
            {contextHolder}
            <HeaderComponent />
          </div>
        </MessageContext.Provider>
      </ConfigProvider>
    </Provider>
  );
};

export default App;