import { Typography, Stack, List, ListItem } from '@krakentech/coral';
import { CreatePassword } from '@krakentech/coral-organisms';
import { Formik, Form } from 'formik';
 
const CreatePasswordPage = () => (
    <CreatePassword>
        <Stack gap="lg" direction="vertical" fullWidth>
            <CreatePasswordTitle title="Setting up your password" />
            <CreatePasswordBody>
                <Stack flexDirection="column" gap="sm">
                    <Typography>
                        In order to keep your account safe there are a few
                        things to avoid when creating your password:
                    </Typography>
                    <Typography component="div">
                        <List listStyleType="disc">
                            <ListItem>
                                Passwords with less than 8 characters{' '}
                            </ListItem>
                            <ListItem>
                                Common passwords like "password" and "football"
                            </ListItem>
                            <ListItem>
                                Passwords based on your name or email address
                            </ListItem>
                        </List>
                    </Typography>
                </Stack>
            </CreatePasswordBody>
 
            <Formik
                initialValues={{}}
                onSubmit={(values) => console.log(values)}
            >
                <Form method="post">
                    <Stack flexDirection="column" gap="lg">
                        <CreatePasswordInput
                            label="Password (8 characters minimum)"
                            strengthLabel="Strength"
                            poorLabel="Lousy..."
                            avgLabel="Probably fine?"
                            goodLabel="Smashed it!"
                        />
                        <CreatePasswordButton
                            buttonText="Set my password"
                            acceptablePasswordStrength={2}
                        />
                    </Stack>
                </Form>
            </Formik>
        </Stack>
    </CreatePassword>
);