import React from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';

const Prefix = styled.h1`
    font-weight: 500;
    margin-bottom: -4px !important;
`;
const Postfix = styled.h4``;
const Wrapper = styled(Link)`
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    padding-bottom: 12px;
    border-bottom: 2px solid transparent;
    border-top: 2px solid transparent;

    &:hover {
        text-decoration: none;
        border-color: #3e4457;
    }

    ${Prefix}, ${Postfix} {
        margin: 0;
    }
`;

function Logo() {
    return (
        <Wrapper to="/">
            <Prefix>3d</Prefix>
            <Postfix>.com.vc</Postfix>
        </Wrapper>
    );
}

Logo.Wrapper = Wrapper;

export default Logo;