import React, { FC } from 'react';
import { Box } from '../Box';
import * as sc from './styles';
import { VerificationInputProps } from './types';

export const VerificationInput: FC<VerificationInputProps> = ({
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  name,
  fields = 6,
  size = 32,
  spacing = 8,
  invalid = false,
  onChange,
  onComplete,
  ...restProps
}) => {
  const handleChange = (value: string) => {
    if (onChange) onChange(value);
  };

  const handleComplete = (value: string) => {
    if (onComplete) onComplete(value);
  };

  return (
    <Box {...restProps}>
      <sc.CodeInput
        fields={fields}
        fieldWidth={size}
        fieldHeight={size}
        spacing={spacing}
        invalid={invalid}
        onChange={handleChange}
        onComplete={handleComplete}
      />
    </Box>
  );
};
