import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { FormField } from './FormField';
import { Input } from './input';

describe('FormField Component', () => {
  it('renders label', () => {
    render(
      <FormField label="Username">
        <Input />
      </FormField>,
    );

    expect(screen.getByText('Username')).toBeInTheDocument();
  });

  it('renders required indicator', () => {
    render(
      <FormField label="Email" required>
        <Input />
      </FormField>,
    );

    expect(screen.getByText('*')).toBeInTheDocument();
  });

  it('renders error message', () => {
    render(
      <FormField label="Email" error="Invalid email">
        <Input />
      </FormField>,
    );

    expect(screen.getByText('Invalid email')).toBeInTheDocument();
  });

  it('renders help text when no error', () => {
    render(
      <FormField label="Email" helpText="Enter your email address">
        <Input />
      </FormField>,
    );

    expect(screen.getByText('Enter your email address')).toBeInTheDocument();
  });

  it('does not render help text when error is present', () => {
    render(
      <FormField label="Email" error="Invalid email" helpText="Help text">
        <Input />
      </FormField>,
    );

    expect(screen.queryByText('Help text')).not.toBeInTheDocument();
    expect(screen.getByText('Invalid email')).toBeInTheDocument();
  });

  it('renders children', () => {
    render(
      <FormField label="Email">
        <Input data-testid="test-input" />
      </FormField>,
    );

    expect(screen.getByTestId('test-input')).toBeInTheDocument();
  });

  it('applies custom className', () => {
    const { container } = render(
      <FormField label="Email" className="custom-class">
        <Input />
      </FormField>,
    );

    expect(container.firstChild).toHaveClass('custom-class');
  });
});