import React from 'react'
import styled from "styled-components";

const ScrollButton = styled.div`
   
    cursor: ${props => props.inactive ? 'default' : 'pointer'};
    opacity: ${props => props.inactive ? '0.2' : '1'};
    z-index: 4005;
    position: fixed;
    top: calc(50% - 20px);
   
    background: none;

    ${props => props.orientation != "left" ? 'left: 20px;' : 'right: 20px;'}
    
    width: 40px;
    height: 40px;
    background-color: rgba(11, 11, 11, 0.7);
    border-radius: 50%;

    &:hover{
        background-color: ${props => !props.inactive && 'rgba(200, 200, 200, 0.2)'};
    }

    &:before{
        content:'';
        top: 12px;
        left: ${props => props.orientation == "left" ? '9px;' : '15px;'};
        position: absolute;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        display: inline-block;
        padding: 7px;
        transform: ${props => props.orientation == "left" ? 'rotate(-45deg)' : 'rotate(135deg)'};
        -webkit-transform: ${props => props.orientation == "left" ? 'rotate(-45deg)' : 'rotate(135deg)'};
    }
  
`;

const MediaScrollButton = props => {
    return (
        <ScrollButton {...props} />
    );
}

export default MediaScrollButton;