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

const StyledTabContainer = styled.div` 
    border-radius: 5px;
    border: 1px solid ${props => props.theme.colorPalette.primary.main};
`;

const Tabs = styled.div` 
    display: flex;
    justify-content: space-around;
    width: 100%;
    background: ${props => props.theme.colorPalette.primary.main};
    color: ${props => props.theme.colorPalette.primary.fontColor};
`;

interface Props {
    show: boolean;
}

const MyTab = styled.div<Props>` 
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    ${ props => props.show && `
        font-weight: bold;
        text-decoration: underline;
    `}

    &:hover{
        cursor: pointer;
        opacity: 0.8;
    }

    &:active {
        transform: scale(0.95);
    }
`;

export { StyledTabContainer, Tabs, MyTab };