import { Button, Fieldset, Group, Input } from '@mantine/core';
import { IconAt, IconPhone } from '@tabler/icons-react';
import { useState } from 'react';

export function TestComponent({ step, onSubmit, onChange }: any) {
  const [email, setEmail] = useState('');

  function onSubmitForm() {
    console.log(email);
  }

  if (true) {
    return 'Coming Soon';
  }

  return (
    <div style={{ display: 'flex', justifyContent: 'center' }}>
      {step.type === 'email' ? (
        <Fieldset legend="Send a test E-mail" style={{ width: 500 }} onSubmit={onSubmitForm}>
          {/*<Input
            placeholder="Your email"
            leftSection={<IconAt size={16} />}
            onChange={(e) => setEmail(e.target.value)}
          />

          <Group justify="flex-end" mt="md">
            <Button type="submit" onClick={onSubmitForm}>
              Submit
            </Button>
          </Group>*/}
        </Fieldset>
      ) : null}

      {step.type === 'sms' ? (
        <Fieldset legend="Send a test SMS" style={{ width: 500 }} onSubmit={onSubmitForm}>
          <Input
            placeholder="Your Phone Number"
            leftSection={<IconPhone size={16} />}
            onChange={(e) => setEmail(e.target.value)}
          />

          <Group justify="flex-end" mt="md">
            <Button type="submit" onClick={onSubmitForm}>
              Submit
            </Button>
          </Group>
        </Fieldset>
      ) : null}
    </div>
  );
}
