import React from 'react';
import { Deck, Slide, Heading, Text as SpectacleText } from 'spectacle';
import { Box, Text, EnvironmentProvider } from '@mintel/ui';

function App() {
  return (
    <EnvironmentProvider env="presentation">
      <Deck>
        <Slide>
          <Box className="flex flex-col items-center justify-center h-full">
            <Heading>Mintel Universal Design System</Heading>
            <SpectacleText>One Codebase. Web, Print, and Presentations.</SpectacleText>
            
            <Box className="mt-8 p-4 bg-mintel-primary rounded-xl shadow-xl">
              <Text className="text-white text-xl">
                This Box and Text comes directly from @mintel/ui!
              </Text>
            </Box>
          </Box>
        </Slide>
      </Deck>
    </EnvironmentProvider>
  );
}

export default App;