import React from 'react';
import { BreakpointProvider } from './components/Breakpoint'
import { ConfigProvider } from 'antd'
import { Button } from './components/Button'
import Icon from '@ant-design/icons';
import { ReactComponent as CloseIcon } from './icons/close.svg'

const brandPrimary = '#FF5200';
const textPrimary = '#1E1D1F'
const textDarker = '#000022'
const textLighter = '#8F9296'
const white = '#FDFDFD'

function App() {
	const items = [
		{
			title: 'Account',
		},
		{
			title: 'Tester Info',
		},
		{
			title: 'Review',
		},
		{
			title: 'Done',
		},
	];
	return (
		<ConfigProvider
			theme={{
				token: {
					colorBgMask: 'rgba(217, 217, 217, 0.65)',
					colorLink: brandPrimary,
					colorLinkHover: brandPrimary,
					colorLinkActive: brandPrimary,
					colorPrimary: brandPrimary,
					colorText: textPrimary,
					colorTextBase: textPrimary,
					fontSize: 16,
					fontSizeHeading1: 28,
					fontSizeHeading2: 22,
					fontSizeHeading3: 20,
					lineHeightHeading1: 1.3,
					lineHeightHeading2: 1.3,
					lineHeightHeading3: 1.3,
					fontSizeHeading4: 16,
					fontFamily: 'Lato, Helvetica, Arial, sans-serif'
				},
				components: {
					Button: {
						// button base
						fontSize: 20,
						borderRadius: 4,
						controlHeight: 45,
						lineHeight: 45 / 20,
						controlOutlineWidth: 0,
						controlOutline: 'transparent',
						// primary button
						colorPrimary: '#FF5A0C',
						colorTextLightSolid: white,
						colorPrimaryHover: brandPrimary,
						colorPrimaryActive: brandPrimary,
						// disabled button
						colorBgContainerDisabled: '#CACACC',
						colorTextDisabled: white,
						// text button
						colorText: brandPrimary,
						colorBgTextHover: 'transparent',
						colorBgTextActive: 'transparent',
					},
					Modal: {
						borderRadiusLG: 10,
						boxShadow: '2px 2px 4px 1px rgba(0, 0, 0, 0.2)',
						paddingContentHorizontalLG: 32,
					},
					Tooltip: {
						fontSize: 14,
						paddingSM: 12,
						paddingXS: 10,
						borderRadius: 4,
						colorTextLightSolid: textDarker,
						colorBgDefault: white,
					},
					Steps: {
						colorSplit: brandPrimary,
						colorTextDescription: textLighter,
					}
				}
			}}
		>
			<BreakpointProvider>
				<div>iHealth</div>
				<Button icon={<Icon component={CloseIcon} />} />
			</BreakpointProvider>
		</ConfigProvider>
	);
}

export default App;