import { Button, Flex, Text } from '@servicetitan/anvil2';
import * as styles from './welcome.module.less';
import { FC, PropsWithChildren } from 'react';

export interface WelcomeProps {
    onContinue: () => void;
    title?: string;
    subtitle?: string;
}

export const Welcome: FC<PropsWithChildren<WelcomeProps>> = ({ onContinue, title, subtitle }) => {
    return (
        <Flex direction="column" className={styles.welcomeRoot}>
            <Flex className={styles.welcome}>
                <div className={styles.illustration} />
            </Flex>
            <Flex direction="column" alignItems="center" className="p-inline-3 p-block-4">
                <Flex direction="column">
                    <Text variant="headline" size="small" el="h2">
                        {title}
                    </Text>
                    <Text variant="headline" size="small" el="h4">
                        {subtitle}
                    </Text>
                    <Text>
                        I'm your AI assistant, here to help you find answers faster and make your
                        experience smoother. While I do my best to share helpful and accurate info,
                        this chat isn't a substitute for professional or legal advice when it really
                        counts.
                    </Text>
                    <br />
                    <Text>
                        By continuing, you're using this feature responsibly and agree that your
                        input may help us improve the experience over time.
                    </Text>

                    <br />
                    <Text alignSelf="flex-start">Let's get started.</Text>
                    <br />
                </Flex>
                <Button appearance="primary" size="medium" onClick={onContinue}>
                    Continue
                </Button>
            </Flex>
        </Flex>
    );
};