import { Auth0Widget } from 'auth0-widget';

import type { Auth0WidgetProps } from 'auth0-widget';

const props: Auth0WidgetProps = {
	authOptions: {
		// domain: 'widget-auth.atko.rocks',
		domain: 'okta-ciam-demo.cic-demo-platform.auth0app.com',
		clientID: 'mbYN1oIgSytHawS1wiybHvbou4yinLOS',
		connections: {
			email: true,
			sms: true,
			google: true,
			apple: true,
		},
	},
	widgetTheme: {
		// primaryColor: { main: '#635dff' },
		// secondary: {
		// 	main: '#ffffff',
		// },
		// components: {
		// 	MuiOutlinedInput: {
		// 		styleOverrides: {
		// 			root: {
		// 				// '&.Mui-focused fieldset': {
		// 				// 	borderColor: '#c9cace',
		// 				// },
		// 				'&.Mui-focused:hover fieldset': {
		// 					borderColor: '#635dff',
		// 				},
		// 				':hover .MuiOutlinedInput-notchedOutline': {
		// 					borderColor: '#c9cace',
		// 				},
		// 				'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
		// 					borderColor: '#635dff',
		// 				},
		// 				// '&.Mui-focused:hover fieldset': {
		// 				// 	borderColor: '#c9cace',
		// 				// },
		// 			},
		// 		},
		// 	},
		// },
		// logo: 'https://i.pinimg.com/originals/6d/3e/83/6d3e8304ff5bef9b39d9c17ffde48c11.png',
	},
};

const App = () => {
	return <Auth0Widget {...props} />;
};

export default App;
