import { useState } from 'react';
import { Stepper, Button, Group } from '@mantine/core';

export default function RegistrationTimeline() {
    const [active, setActive] = useState(1);
    const nextStep = () => setActive((current) => (current < 3 ? current + 1 : current));
    const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current));

    return (
        <>
            <Stepper active={active} onStepClick={setActive}>
                <Stepper.Step label="First step" description="Change Login password">

                </Stepper.Step>
                <Stepper.Step label="Second step" description="Change Tranaction password">

                </Stepper.Step>
                {/* <Stepper.Step label="Final step" description="Verify OTP">

                </Stepper.Step> */}
                <Stepper.Completed>
                    Completed, click back button to get to previous step
                </Stepper.Completed>
            </Stepper>
            {/* 
            <Group justify="center" mt="xl">
                <Button variant="default" onClick={prevStep}>Back</Button>
                <Button onClick={nextStep}>Next step</Button>
            </Group> */}
        </>
    );
}