import { type HTMLAttributes } from 'react';

import Stack from '@material-hu/mui/Stack';

type TabsWrapperProps = {
  disabled: boolean;
  children: React.ReactNode;
};

/** Wraps content and makes it non-interactive (mouse, keyboard, a11y) when disabled via the inert attribute. */
const TabsWrapper = ({ disabled, children }: TabsWrapperProps) => (
  <Stack
    sx={disabled ? { opacity: 0.5 } : undefined}
    {...(disabled && ({ inert: true } as HTMLAttributes<HTMLDivElement>))}
  >
    {children}
  </Stack>
);

export default TabsWrapper;