import React from 'react';

type Props = {
  onConfirm: any;
};

export default function OTP(props: Props) {
  const { onConfirm } = props || {};

  return (
    <div style={styles.container}>
      <img
        src="https://zeqapay.com/wp-content/uploads/2023/10/Zeqa-logo-100.png"
        style={styles.logo}
      />
      <label style={styles.subTitle}>Login for personalised offer from</label>
      <input style={styles.input} type="text" placeholder="Enter your OTP" />
      <button style={styles.button} type="button" onClick={onConfirm}>
        Login
      </button>
    </div>
  );
}

const styles: any = {
  container: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
    border: '1px solid #e5e5ea',
    padding: 30,
  },
  logo: {
    width: 125,
    height: 65,
    objectFit: 'contain',
  },
  subTitle: {
    marginTop: 10,
    marginBottom: 30,
    color: '#1A1C1E',
  },
  input: {
    width: 300,
    height: 40,
    padding: 5,
    border: '1px solid #e5e5ea',
    borderRadius: 7,
    marginBottom: 10,
  },
  button: {
    width: 300,
    height: 40,
    color: '#FFFFFF',
    backgroundColor: '#009245',
    borderRadius: 7,
    marginTop: 20,
  },
};