import { QuestionMark } from "../../components/Icons";
import BorderShadowButton, { THEMES } from "../../components/BorderShadowButton";
import styled, { css } from "styled-components";


function TutorialBtn({ onClick, className, disabled }) {
    return (
        <StyledBorderShadowButton
            className={className}
            icon={<QuestionMark/>}
            theme={THEMES.DARK}
            onClick={onClick}
            $disabled={disabled}
        />
    );
}

const StyledBorderShadowButton = styled(BorderShadowButton)`
    padding: 12px;
    padding-right: 20px;

    svg {
        --size: 20px;
        width: var(--size);
        height: var(--size);
    }

    ${({ $disabled }) => $disabled && css`
        display: none;
    `}
`;

export default TutorialBtn;