import * as React from 'react';
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { FormStatus } from '@/components/ui/FormStatus';
import { FormError } from '@/components/ui/FormError';
import { FormSuccess } from '@/components/ui/FormSuccess';

describe('FormStatus Components', () => {
  describe('FormStatus', () => {
    it('returns null when no message is provided', () => {
      const { container } = render(
        <FormStatus message="">
          <span>Child</span>
        </FormStatus>
      );
      expect(container.firstChild).toBeNull();
    });

    it('returns null when message is undefined', () => {
      const { container } = render(
        <FormStatus message={undefined}>
          <span>Child</span>
        </FormStatus>
      );
      expect(container.firstChild).toBeNull();
    });

    it('renders the message and children when message is provided', () => {
      render(
        <FormStatus message="Test Message" variant="success">
          <span data-testid="child">Icon</span>
        </FormStatus>
      );
      expect(screen.getByText('Test Message')).toBeInTheDocument();
      expect(screen.getByTestId('child')).toBeInTheDocument();
    });

    it('applies success variant classes', () => {
      const { container } = render(
        <FormStatus message="Success" variant="success">
          <span>Icon</span>
        </FormStatus>
      );
      const div = container.querySelector('div');
      expect(div).toHaveClass('bg-emerald-500/15');
      expect(div).toHaveClass('text-emerald-500');
    });

    it('applies error variant classes by default', () => {
      const { container } = render(
        <FormStatus message="Error">
          <span>Icon</span>
        </FormStatus>
      );
      const div = container.querySelector('div');
      expect(div).toHaveClass('bg-destructive/15');
      expect(div).toHaveClass('text-destructive');
    });
  });

  describe('FormError', () => {
    it('returns null when no message is provided', () => {
      const { container } = render(<FormError message="" />);
      expect(container.firstChild).toBeNull();
    });

    it('renders the error message and alert icon', () => {
      const { container } = render(<FormError message="Invalid Credentials" />);
      expect(screen.getByText('Invalid Credentials')).toBeInTheDocument();
      // Check for destructive classes
      const div = container.querySelector('div');
      expect(div).toHaveClass('bg-destructive/15');
      expect(div).toHaveClass('text-destructive');
    });
  });

  describe('FormSuccess', () => {
    it('returns null when no message is provided', () => {
      const { container } = render(<FormSuccess message="" />);
      expect(container.firstChild).toBeNull();
    });

    it('renders the success message and check icon', () => {
      const { container } = render(<FormSuccess message="Email Sent" />);
      expect(screen.getByText('Email Sent')).toBeInTheDocument();
      // Check for emerald classes
      const div = container.querySelector('div');
      expect(div).toHaveClass('bg-emerald-500/15');
      expect(div).toHaveClass('text-emerald-500');
    });
  });
});