'use client';

import { Form } from '@/ui/Form';
import { Group } from '@/ui/Group';
import React from 'react';

interface AuthFormProps {
  children: React.ReactNode;
  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
  'data-testid'?: string;
}

/**
 * AuthForm
 *
 * Semantic form wrapper for auth flows.
 */
export function AuthForm({ children, onSubmit, 'data-testid': testId }: AuthFormProps) {
  return (
    <Form onSubmit={onSubmit} data-testid={testId}>
      <Group direction="column" gap={6}>
        {children}
      </Group>
    </Form>
  );
}
