import { Box, Flex, Text } from "@mantine/core";
import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
import classes from './RequestsButton.module.css'

interface RequestsButtonProps {
    count: number;
    onClick?: () => void;
    mode: 'all' | 'requests';
}

export function RequestsButton(props : RequestsButtonProps) {
    return (
        <>
            {props.mode == 'all' && <>
                <Box pl={'sm'} pb={'xs'} pr={'xs'} onClick={props.onClick} className={classes.btn}>
                    <Flex align={'center'} justify={'space-between'} onClick={() => {}}>
                        <Text fz={12} c={'blue'} fw={'bold'} ta={'center'}>
                            Requests +{props.count}
                        </Text>
                        <Flex align={'center'} gap={'sm'}>
                            <IconChevronRight size={14} stroke={1.5} />
                        </Flex>
                    </Flex>
                </Box>
            </>}
            {props.mode == 'requests' && <>
                <Box pl={'sm'} pb={'xs'} pr={'xs'} onClick={props.onClick} className={classes.btn}>
                    <Flex align={'center'} justify={'space-between'} onClick={() => {}}>
                        <Text fz={12} c={'red'} fw={'bold'} ta={'center'}>
                            Back to all chats
                        </Text>
                        <Flex align={'center'} gap={'sm'}>
                            <IconChevronLeft size={14} stroke={1.5} />
                        </Flex>
                    </Flex>
                </Box>            
            </>}
        </>
    )
}