import { FC } from 'react';
import { useOutletContext } from 'react-router';

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

import Skeleton from '@material-hu/components/design-system/Skeleton';

import RuleCreation from '../../new/components/RuleCreation';
import { HourCategoryEditOutletContext } from '../index';

const RulesTab: FC = () => {
  const { showSkeleton = false } =
    useOutletContext<HourCategoryEditOutletContext>() || {};

  return (
    <Stack sx={{ gap: 2 }}>
      <Skeleton
        isLoading={showSkeleton}
        sx={{
          borderRadius: theme => theme.spacing(2),
          maxWidth: 'unset',
        }}
      >
        <RuleCreation isEdit />
      </Skeleton>
    </Stack>
  );
};

export default RulesTab;