import {
  OnboardingModes,
  OnboardingProvider,
  OnboardingTip,
  useRestartOnboarding
} from '@applica-software-guru/react-admin';
import { Button, Stack, Typography } from '@mui/material';

function CustomPage() {
  return (
    <OnboardingProvider mode={OnboardingModes.BROWSER}>
      <Stack direction="row" justifyContent="space-between">
        <OnboardingTip title="Test 1" id="test1">
          <Typography>Test 1</Typography>
        </OnboardingTip>
        <OnboardingTip title="Test 2" id="test2">
          <Typography>Test 2</Typography>
        </OnboardingTip>
        <OnboardingTip title="Test 3" id="test3" step={1}>
          <Typography>Test 3</Typography>
        </OnboardingTip>
      </Stack>
      <RestartButton />
    </OnboardingProvider>
  );
}

function RestartButton() {
  const restartOnboarding = useRestartOnboarding();
  return <Button onClick={restartOnboarding}>RESTART</Button>;
}

export { CustomPage, RestartButton };