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

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 && (
                <Divider
                    w={"100%"}
                    my={"lg"}
                />
            )}
            {title && (
                <Center>
                    <Title
                        order={4}
                        mb={"lg"}
                        style={{ color: myColor[6], textAlign: "center" }}>
                        {title}
                    </Title>
                </Center>
            )}
        </Stack>
    );
};

export default Logo;
