import React from 'react';
import ReactCodeInput from 'react-verification-code-input';
import styled from 'styled-components';
import { theme } from '../../styles/theme';
import { VerificationInputProps } from './types';

const ReactCodeComponent = (styledProps: any) => (
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
  <ReactCodeInput {...styledProps} />
);
export const CodeInput = styled(ReactCodeComponent)<VerificationInputProps>`
  width: auto !important;

  input {
    font-size: ${theme.fontSizes[4]} !important;
    font-family: ${theme.fontFamilies.baseText} !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 2px solid
      ${(props: any) =>
        props.invalid ? theme.colors.red[0] : theme.colors.gray[3]} !important;
    background-color: ${theme.colors.white} !important;
    color: ${theme.colors.gray[1]} !important;
    margin-right: ${(props: any) => props.spacing}px;

    &:last-child {
      margin-right: 0;
    }
  }
`;
