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

type Props = {
    placeholderText: string;
    id: string;
    value?: string;
    onChange?: (value: string) => void;
    onFileChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
    type?: string;
    multiple?: boolean;
    style?: React.CSSProperties;
    search?: boolean;
    onFocus?: any
    onBlur?: any
    $size?: string
}

const InputContainer = styled.div`
    width: 100%;
    display: flex;
    flex: 3;
    
`;

const StyledInput = styled.input`
    padding: 8px 10px;
    color: black;
    border-radius: 8px;
    border: 1px solid #A1A1A1;
    background-color: transparent;
    &:focus{
        border: 1px solid #adadad;
    }
    width: 100%;
    font-size: 18px;
    color: ${props=>props.theme.textColor}
`;

const Input = React.forwardRef<HTMLInputElement, Props>(({ placeholderText, id, value, onChange, onFileChange, type = "text", multiple, style, onFocus, onBlur }, ref) => {
    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const { value } = e.target;
        if (onChange) {
            onChange(value);
        }
    };

    return (
        <InputContainer>
            <StyledInput
                type={type}
                placeholder={placeholderText}
                value={value}
                multiple={multiple}
                onChange={type === "file" && onFileChange ? onFileChange : handleInputChange}
                ref={ref}
                style={style}
                onFocus={onFocus}
                onBlur={onBlur}
            />
        </InputContainer>
    );
});

export default Input;