import React from 'react'
import { Paragraph, Text } from 'components/Typography'
import { Button, Form, Input } from 'antd'
import './Forms.scss'

interface IProps {
  isEdit?: boolean
  onClose: () => void
  onSubmit: () => void
}

const ThirdStep = ({ onClose, isEdit }: IProps) => {
  return (
    <div className="data-capture-form--final-step p__x--24 p__t--24 p__b--32">
      <Paragraph preset="semibold18">Form Name</Paragraph>
      <Paragraph
        preset="regular16"
        className="m__t--4 text--default opacity--80"
      >
        Form name will help you identify this data capture later and will not be
        displayed to your audience.
      </Paragraph>

      <Form.Item
        name="formName"
        className={'m__t--16 m__b--20'}
        rules={[
          {
            required: true,
            message: 'Please enter the form name'
          }
        ]}
        label={
          <Text className="m__b--4" preset="regular14">
            Form name
          </Text>
        }
      >
        <Input className="height--52" placeholder="Enter the form name" />
      </Form.Item>

      <div className="profile-smart-link__actions m__t--38">
        <Button
          className="ant-btn-xl ant-btn-uppercase m__r--10"
          onClick={onClose}
        >
          Cancel
        </Button>
        <Button
          className="ant-btn-xl ant-btn-uppercase"
          size="large"
          type="primary"
          htmlType="submit"
        >
          {isEdit ? 'Save' : 'Done'}
        </Button>
      </div>
    </div>
  )
}

export default ThirdStep
