import React from 'react';
import type { ThemeProviderProps } from '../../theme/ThemeProvider';
import ThemeProvider from '../../theme/ThemeProvider';
import Toast from '../Toast';
import Portal from '../Portal';
import LocaleProvider from '../LocaleProvider';
import type { LocaleValues } from '../../locales/types';
import enAULocale from '../../locales/en_AU';

interface HeroDesignProviderProps extends ThemeProviderProps {
  locale?: LocaleValues;
}

const HeroDesignProvider = ({
  theme,
  locale = enAULocale,
  children,
}: HeroDesignProviderProps) => (
  <LocaleProvider locale={locale}>
    <ThemeProvider theme={theme}>
      <Toast.Provider>
        <Portal.Provider>{children}</Portal.Provider>
      </Toast.Provider>
    </ThemeProvider>
  </LocaleProvider>
);

export default HeroDesignProvider;