import React from 'react';
import styled from 'styled-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faHome } from '@fortawesome/free-solid-svg-icons';

interface Props {
    url?: string;
}

export const HomeButton: React.FC<Props> = ({ url }) => {
    return (
        <NavButtonDiv data-testid="backButton">
            <ButtonWrapper href={url}>
                <FontAwesomeIcon icon={faHome} style={{ height: 20, width: 20 }} />
            </ButtonWrapper>
        </NavButtonDiv>
    );
};

const NavButtonDiv = styled.div`
    display: flex;
`;

const ButtonWrapper = styled.a`
    color: #212529;
    background-color: #e2e6ea;
    border-color: #dae0e5;
    :hover {
        text-decoration: none;
        color: #212529;
    }
    padding: 4px 8px;
    border-width: 1px;
    border-radius: 5px;
`;
