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

const sizes = {
    xxs: '5px',
    xs: '10px',
    sm: '20px',
    md: '30px',
    lg: '35px',
    xl: '45px',
    xxl: '60px',
};

interface Props {
    inputSize: Sizes;
    name: string;
    onChange: (e: { target: { value: string } }) => void;
    error?: string;
    color: Colors;
}

interface LabelProps {
    error?: string;
}

const StyledDatetimeInput = styled.input<Props>`
    height: ${(props) => sizes[props.inputSize]};
    min-width: 170px;
    border: 1px solid ${(props) => props.theme.colorPalette[props.color]?.main};
    ${(props) => props.error && `
        color: red;
        border: 1px solid red;
    `}
    border-radius: 3px;
    padding-left: 10px;
`;

const StyledLabel = styled.label<LabelProps>`
    ${(props) => props.error && "color: red"};
`;

const StyledInputContainer = styled.div`
    margin-top: 10px;
    display: flex;
    flex-direction: column;
`;

const StyledInputError = styled.div`
    color: red;
    font-size: 12px;
`;

export {
    StyledDatetimeInput,
    StyledLabel,
    StyledInputContainer,
    StyledInputError,
};