import React, {ReactNode} from 'react';
import './blockedinput.scss'

type BlockedInputProps = {
    size: number
    value: string
    onChange: (e:string) => void
    hasError?: boolean
}

const BlockedInput = ({size, value, onChange, hasError=false}: BlockedInputProps) => {

    return (
       <div className={`blocked-input ${hasError && 'has-error'}`}>
           <label htmlFor={`blocked-input--element`}>
               <input
                   autoFocus
                   id='blocked-input--element' className={'blocked-input--element'} value={value} type={"number"} onChange={(e)=>{
                   onChange(e.target.value.substring(0,size))
               }}/>

               {
                   new Array(size).fill(null).map((_,i)=>
                   <div  key={i} className={'blocked-input--block'}>{value[i] ?? ''}</div>
                   )
               }

           </label>

       </div>
    );
}

export default BlockedInput;