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

describe('AuthCard', () => {
  describe('rendering', () => {
    it('should render with title and children', () => {
      render(
        <AuthCard title="Sign In">
          <div data-testid="child-content">Child content</div>
        </AuthCard>
      );

      expect(screen.getByText('Sign In')).toBeInTheDocument();
      expect(screen.getByTestId('child-content')).toBeInTheDocument();
    });

    it('should render with title and description', () => {
      render(
        <AuthCard title="Sign In" description="Enter your credentials">
          <div data-testid="child-content">Child content</div>
        </AuthCard>
      );

      expect(screen.getByText('Sign In')).toBeInTheDocument();
      expect(screen.getByText('Enter your credentials')).toBeInTheDocument();
      expect(screen.getByTestId('child-content')).toBeInTheDocument();
    });

    it('should render without description', () => {
      render(
        <AuthCard title="Sign In">
          <div data-testid="child-content">Child content</div>
        </AuthCard>
      );

      expect(screen.getByText('Sign In')).toBeInTheDocument();
      expect(screen.getByTestId('child-content')).toBeInTheDocument();
    });

    it('should render with multiple children', () => {
      render(
        <AuthCard title="Sign In">
          <div data-testid="child-1">Child 1</div>
          <div data-testid="child-2">Child 2</div>
          <div data-testid="child-3">Child 3</div>
        </AuthCard>
      );

      expect(screen.getByText('Sign In')).toBeInTheDocument();
      expect(screen.getByTestId('child-1')).toBeInTheDocument();
      expect(screen.getByTestId('child-2')).toBeInTheDocument();
      expect(screen.getByTestId('child-3')).toBeInTheDocument();
    });
  });

  describe('accessibility', () => {
    it('should have proper semantic structure', () => {
      render(
        <AuthCard title="Sign In" description="Enter your credentials">
          <div>Content</div>
        </AuthCard>
      );

      // The component uses Card and SectionHeader which should have proper semantics
      expect(screen.getByText('Sign In')).toBeInTheDocument();
      expect(screen.getByText('Enter your credentials')).toBeInTheDocument();
    });
  });

  describe('edge cases', () => {
    it('should handle empty title', () => {
      render(
        <AuthCard title="">
          <div>Content</div>
        </AuthCard>
      );

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

    it('should handle empty description', () => {
      render(
        <AuthCard title="Sign In" description="">
          <div>Content</div>
        </AuthCard>
      );

      expect(screen.getByText('Sign In')).toBeInTheDocument();
      expect(screen.getByText('Content')).toBeInTheDocument();
    });

    it('should handle null children', () => {
      render(
        <AuthCard title="Sign In">
          {null}
        </AuthCard>
      );

      expect(screen.getByText('Sign In')).toBeInTheDocument();
    });

    it('should handle undefined children', () => {
      render(
        <AuthCard title="Sign In">
          {undefined}
        </AuthCard>
      );

      expect(screen.getByText('Sign In')).toBeInTheDocument();
    });
  });
});