import styled from 'styled-components';
import { respondTo } from '../utils/responsive';

function ShadedTitle({ title, className, as }) {
    return (
        <StyledContainer className={className} as={as}>
            <span>{title}</span>
            <span>{title}</span>
        </StyledContainer>

    );
}

const StyledContainer = styled.div`
    width: fit-content;
    position: relative;
    isolation: isolate;
    color: var(--main-color-a);

    span:first-child {
        color: currentColor;
    }

    span:last-child {
        position: absolute;
        z-index: -1;
        left: 0;
        top: 0px;

        width: 100%;
        height: 100%;

        -webkit-text-stroke: 7px var(--neutrals-700);
        text-stroke: 7px var(--neutrals-700);
        color: var(--neutrals-700);
        text-shadow: 3px 2px 0px #2b3247;

        ${respondTo.lg} {
            -webkit-text-stroke: 4px var(--neutrals-700);
            text-stroke: 4px var(--neutrals-700);
            text-shadow: 2px 1px 0px #2b3247;
        }
    }
`;

export default ShadedTitle;