import React from 'react';
import TabsMenu, { TabItem } from '../layout/TabsMenu';
import CreateAccount from './CreateAccount';
import Authenticate from './Authenticate';
import { subMenuMarginTop } from '../layout/layout.constants';
import TextIcon from '../elements/TextIcon';

interface Props {}

const setupTabs: TabItem[] = [
	{
		key: 'create-account',
		title: 'Create Account',
		icon: <TextIcon>1.</TextIcon>,
		tab: () => <CreateAccount />,
	},
	{
		key: 'authenticate',
		title: 'Enter Access Code',
		icon: <TextIcon>2.</TextIcon>,
		tab: () => <Authenticate />,
	},
];

function SetupTab({}: Props) {
	return <TabsMenu variant={'clean'} mt={subMenuMarginTop} tabs={setupTabs} />;
}

export default SetupTab;