import styled from 'styled-components';
import * as React from 'react';
import { Colors, Variants } from '../../styles';

interface Props {
    fullWidth?: boolean;
}

interface TextAreaProps {
    variant: Variants;
    color: Colors;
}

const StyledContainer = styled.div<Props>`
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    width: 25ch;

    ${props =>
        props.fullWidth &&
    `
        width: 100%;
    `}
`;

const StyledTextArea = styled.textarea<TextAreaProps>`
    background: transparent;
    border-radius: 3px;
    border: 1px solid ${props => props.theme.colorPalette[props.color]?.main};
    outline: 0;
    ${ props => props.variant === 'transparent' &&`
        border: none;
    `}
`;

const StyledLabel = styled.label``;

export { StyledContainer, StyledTextArea, StyledLabel };