import {
  Anchor,
  Button,
  Checkbox,
  Divider,
  Group,
  Paper,
  PaperProps,
  PasswordInput,
  Stack,
  Text,
  TextInput,
} from '@mantine/core';
import { useForm } from '@mantine/form';
import { upperFirst, useToggle } from '@mantine/hooks';
import { LogidexButton } from '@/components/Forms/LogidexButton';

export function AuthenticationForm(props: PaperProps) {
  const [type, toggle] = useToggle(['login', 'register']);
  const form = useForm({
    initialValues: {
      email: '',
      name: '',
      password: '',
      terms: true,
    },

    validate: {
      email: (val) => (/^\S+@\S+$/.test(val) ? null : 'Invalid email'),
      password: (val) => (val.length <= 6 ? 'Password should include at least 6 characters' : null),
    },
  });

  return (
    <Paper radius="md" p="lg" withBorder {...props}>
      <Text size="lg" fw={500} ta="center">
        Добро пожаловать в Logidex
      </Text>

      <Group grow mb="md" mt="md">
        <LogidexButton radius="xl">Войти с помощью LogidexID</LogidexButton>
      </Group>
    </Paper>
  );
}