import { useRosettaColors } from "@/app/hooks/useRosettaColors";
import { Box, Button, darken, Flex, lighten, Text, useComputedColorScheme } from "@mantine/core";
import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
import { useNavigate } from "react-router-dom";
import classes from './Breadcrumbs.module.css'

export interface BreadcrumbsProps {
    text: string;
    onClick?: () => void;
    rightSection?: React.ReactNode;
}

export function Breadcrumbs(props : BreadcrumbsProps) {
    const {chevrons} = useRosettaColors();
    const colorScheme = useComputedColorScheme();
    const navigate = useNavigate();
    
    return (
        <>
            <Box w={'100%'} h={50}>
                <Flex p={'sm'} h={'100%'} align={'center'} justify={'space-between'}>
                    <Flex align={'center'}>
                        <Box>
                            <Button className={classes.history_button} onClick={() => navigate(-1)} c={chevrons.active} variant={'subtle'} p={5}>
                                <IconChevronLeft></IconChevronLeft>
                            </Button>

                            <Button className={classes.history_button_disabled} 
                                c={chevrons.disabled} variant={'subtle'} p={5}>
                                <IconChevronRight></IconChevronRight>
                            </Button>

                        </Box>
                        <Box ml={'sm'}>
                            <Text fw={'bold'} c={colorScheme == 'light' ? darken(chevrons.active, 0.6) : lighten(chevrons.active, 0.6)} size={'sm'}>{props.text}</Text>
                        </Box>
                    </Flex>
                    <Box>
                        {props.onClick && (<Button onClick={props.onClick} p={0} pr={6} variant={'transparent'}>Save</Button>)}
                        {props.rightSection}
                    </Box>
                </Flex>
            </Box>
        </>
    )
}