import { Button } from "@ax/components";

import * as S from "./style";

const WelcomeStep = (props: IWelcomeStepProps) => {
	const { onSkip, onClickNext } = props;

	return (
		<S.Wrapper>
			<S.WelcomeWrapper>
				<S.EmojiWrapper>👋</S.EmojiWrapper>
				<S.Title>Welcome to Griddo :)</S.Title>
				<S.Text>
					<p>We’re excited to have you onboard to help us build a better web.</p>
					<p>
						Let's start <strong>completing your profile</strong> in Griddo. This will help the team to recognise your
						and improve collaboraation.
					</p>
				</S.Text>
			</S.WelcomeWrapper>
			<S.ImageWrapper>
				<S.Actions>
					<Button type="button" buttonStyle="text" onClick={() => onSkip()}>
						Skip, I’ll do it later
					</Button>
					<Button type="button" onClick={() => onClickNext()}>
						Complete profile
					</Button>
				</S.Actions>
			</S.ImageWrapper>
		</S.Wrapper>
	);
};

interface IWelcomeStepProps {
	onSkip: () => void;
	onClickNext: () => void;
}

export default WelcomeStep;
