import { Center, Divider, Image, Stack, Title } from "@mantine/core";

type Props = {
    title?: string;
};

const Logo = ({ title }: Props) => {
    return (
        <Stack
            align="center"
            gap={0}>
            <Image
                src="/favicon.svg"
                alt="LogiDex Logo"
                w={80}
            />
            <Title
                ta={"center"}
                order={2}
                mt={"md"}>
                LogiDex
            </Title>
            <Title
                ta={"center"}
                order={5}
                mt={"sm"}
                style={{ color: "#4AAAC7" }}>
                Fulfillment & Delivery
            </Title>
            {title && (
                <Divider
                    w={"100%"}
                    mt={"md"}
                />
            )}
            {title && (
                <Center>
                    <Title
                        order={4}
                        my={"md"}>
                        {title}
                    </Title>
                </Center>
            )}
        </Stack>
    );
};

export default Logo;