import { Center, Image, Stack, Text, 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={70}
                h={80}
            />
            <Title
                ta={"center"}
                order={4}
                my={"xs"}>
                LogiDex
            </Title>
            {title && (
                <Center>
                    <Text
                        fz={"xs"}
                        mb={"lg"}
                        style={{ color: myColor[6], textAlign: "center" }}>
                        {title}
                    </Text>
                </Center>
            )}
        </Stack>
    );
};

export default Logo;
