import type { CreateMUIStyled, Theme } from '@mui/material';
import { styled as muiStyled, useTheme } from '@mui/material';

export * from './theme';
export * from './theme-provider';
export { default as ThemeProvider } from './theme-provider';
export { useTheme };

const isTransientProp = (prop: string) => prop.startsWith('$');

export const styled: CreateMUIStyled<Theme> = (component: any, options?: any) => {
  return muiStyled(component, {
    ...options,
    shouldForwardProp: (prop: string) => {
      if (options?.shouldForwardProp) {
        return options.shouldForwardProp(prop) && !isTransientProp(prop);
      }
      return !isTransientProp(prop);
    },
  });
};
