import React, { useState } from "react"
import * as S from "./styles"
import { TextInputProps } from "./interface"

const TextInput:React.FC<TextInputProps> = ({ 
  label, 
  className,
  onChange,
  disabled,
  placeholder,
  name,
  type,
  value
}) => {
  const [valueSelected, setValueSelected] = useState(value)

  const changeValue = (event: any) => {
    const { value } = event.target
    setValueSelected(value)
    onChange(event)
  }

  return (
    <S.Container className={className}>
      <S.Label>{label}</S.Label>
      <S.Input 
        type={type}
        name={name}
        value={valueSelected}
        placeholder={placeholder} 
        disabled={disabled} 
        onChange={(event) => changeValue(event)} 
      />
    </S.Container>
  )
}

export default TextInput