import React from 'react';
import { ChakraProvider, extendTheme } from '@chakra-ui/react';
import WelcomePage from './components/WelcomePage';
// import ApiService from './services/ApiService';

const Select = {
  // parts: ["icon"], // No need to specify parts if only targeting icon
  baseStyle: {
      icon: {
          height: "0px",
          width: "0px",
      },
  },
};

// Custom theme extending Chakra UI
const theme = extendTheme({
  components: {
    Select,
},
  colors: {
    brand: {
      50: '#eff6ff',
      100: '#dbeafe', 
      200: '#bfdbfe',
      300: '#93c5fd',
      400: '#60a5fa',
      500: '#3b82f6',
      600: '#2563eb',
      700: '#1d4ed8',
      800: '#1e40af',
      900: '#1e3a8a',
    },
  },
  fonts: {
    heading: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif`,
    body: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif`,
  },
  styles: {
    global: {
      body: {
        bg: 'gray.50',
      },
    },
  },
});

function App() {
  return (
    <ChakraProvider theme={theme}>
      
        <WelcomePage />

    </ChakraProvider>
  );
}

export default App;