import {
    ResetPassword,
    ResetPasswordAction,
    ResetPasswordButton,
    ResetPasswordHelperText,
    ResetPasswordInput,
    ResetPasswordTitle,
} from '@krakentech/coral-organisms';
import { Stack } from '@krakentech/coral';
import { Formik, Form } from 'formik';
import * as Yup from 'yup';
 
type ResetPasswordFormValues = {
    email: string;
};
 
const initialValues: ResetPasswordFormValues = {
    email: '',
};
 
<ResetPassword>
    <Stack gap="lg" flexDirection="column">
        <ResetPasswordTitle title="Reset my password" />
 
        <Formik
            initialValues={initialValues}
            onSubmit={(values: ResetPasswordFormValues) => console.log(values)}
            validationSchema={Yup.object().shape({
                email: Yup.string()
                    .email('Please enter valid email')
                    .required('Please enter your email'),
            })}
        >
            <Form method="post">
                <Stack flexDirection="column">
                    <ResetPasswordInput />
                    <ResetPasswordHelperText title="We'll send you an email with instructions on how to reset your password" />
                    <ResetPasswordButton buttonText="Send email" />
                </Stack>
            </Form>
        </Formik>
        <ResetPasswordAction
            title="Remembered your password?"
            link={{
                label: 'Sign in to my Octopus Energy account',
                href: 'https://octopus.energy/login',
            }}
        />
    </Stack>
</ResetPassword>;