import { Button, Flex, Text } from "@mantine/core";
import { IconChevronLeft } from "@tabler/icons-react";
import { useNavigate } from "react-router-dom";

interface AuthFlowBreadcrumbsProps {
    rightSection?: React.ReactNode;
    title: string;
}

export function AuthFlowBreadcrumbs(props: AuthFlowBreadcrumbsProps) {
    const navigate = useNavigate();

    return (                    
        <Flex w={'100%'} mih={50} justify={'space-between'} pl={'sm'} pr={'sm'} direction={'row'} align={'center'}>
            <Flex align={'center'} justify={'flex-start'} style={{ flex: 1 }}>
                <Button p={0} leftSection={
                        <IconChevronLeft size={15}></IconChevronLeft>
                    } color="red" onClick={() => navigate(-1)} variant="transparent">
                        Back
                </Button>
            </Flex>
            <Flex style={{ flex: 1 }} justify={'center'}>
                <Text fw={500} ta={'center'} size={'sm'}>{props.title}</Text>
            </Flex>
            <Flex align={'center'} justify={'flex-end'} style={{ flex: 1 }}>
                {props.rightSection}
            </Flex>
        </Flex>
    );
}