import { Container, Flex, Text, Title } from '@mantine/core';
import classes from './MessageSteps.module.css';
import { RosettaLogo } from '../RosettaLogo/RosettaLogo';
import { Switch } from '../Switch/Switch';
import { useState } from 'react';
import { Sender } from '../Sender/Sender';
import { Recipient } from '../Recipient/Recipient';


export function MessageSteps() {
    const [show, setShow] = useState('Sender');

    return (
        <div className={classes.wrapper}>
            <Container>
                <Flex justify={'center'} mb={'lg'} align={'center'}>
                    <RosettaLogo size={50}></RosettaLogo>
                </Flex>
                <Title ta="center" className={classes.title}>
                    How is my message sent?
                </Title>

                <Container size={560} p={0}>
                    <Text size="sm" className={classes.description}>
                        See why Rosetta is truly secure. Notice how your message is sent and received from you to the recipient. The steps highlighted in blue are what you see, while the steps not highlighted are what happens behind the scenes.
                    </Text>
                </Container>

                <Flex align={'center'} justify={'center'} mt={'xl'}>
                    <Switch data={[
                        'Sender',
                        'Recipient'
                    ]} onChange={(v) => setShow(v)}></Switch>
                </Flex>

                <Flex justify={'center'} align={'center'} mt={'xl'} gap={'xl'}>
                    <Flex>
                        {show == 'Sender' && <Sender></Sender>}
                        {show == 'Recipient' && <Recipient></Recipient>}
                    </Flex>                  
                </Flex>
            </Container>
        </div>
    );
}