import React, { useState } from 'react'
import 'hts-react-form/styles/default.css'
import { HTSReactForm } from 'hts-react-form'

function HtsFormExample() {
  const [email, setEmail] = useState(null)
  const [password, setPassword] = useState(null)

  const loginHandler = (e) => {
    e.preventDefault()
  }

  return (
    <HTSReactForm
      controls={[
        {
          label: 'Email',
          type: 'text',
          name: 'email',
          value: email,
          onChange: (e) => setEmail(e.target.value),
          required: true,
        },
        {
          label: 'Password',
          type: 'password',
          name: 'password',
          value: password,
          onChange: (e) => setPassword(e.target.value),
          required: true,
        },
      ]}
      actionControl={{
        label: 'Login',
        onSubmit: loginHandler,
        className: `${btnStyles.button} ${btnStyles.primary}`,
      }}
      forgetPassword={{
        label: 'Forgot Password?',
        onClick: () => {},
      }}
      googleLogin={{
        label: <i className='la la-google-plus'></i>,
        onClick: () => {},
      }}
      facebookLogin={{
        label: <i className='lab la-facebook'></i>,
        onClick: () => {},
      }}
      githubLogin={{
        label: <i className='la la-github'></i>,
        onClick: () => {},
      }}
    />
  )
}

export default HtsFormExample