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

describe('ProfileCreated', () => {
  it('renders email correctly', () => {
    render(<ProfileCreated email="test@example.com" />);
    expect(screen.getByText('test@example.com')).toBeInTheDocument();
  });

  it('renders success message', () => {
    render(<ProfileCreated email="test@example.com" />);
    expect(screen.getByText('Profile created successfully')).toBeInTheDocument();
  });

  it('displays first letter of email in uppercase', () => {
    render(<ProfileCreated email="john@example.com" />);
    expect(screen.getByText('J')).toBeInTheDocument();
  });

  it('handles lowercase email correctly', () => {
    render(<ProfileCreated email="alice@example.com" />);
    expect(screen.getByText('A')).toBeInTheDocument();
  });

  it('handles uppercase email correctly', () => {
    render(<ProfileCreated email="BOB@EXAMPLE.COM" />);
    expect(screen.getByText('B')).toBeInTheDocument();
  });

  it('handles email starting with number', () => {
    render(<ProfileCreated email="123user@example.com" />);
    expect(screen.getByText('1')).toBeInTheDocument();
  });

  it('handles single character email', () => {
    render(<ProfileCreated email="x@test.com" />);
    expect(screen.getByText('X')).toBeInTheDocument();
  });

  it('renders checkmark SVG', () => {
    const { container } = render(<ProfileCreated email="test@example.com" />);
    const svg = container.querySelector('svg');
    expect(svg).toBeInTheDocument();
    expect(svg?.getAttribute('width')).toBe('16');
    expect(svg?.getAttribute('height')).toBe('16');
  });

  it('has correct structure with all main elements', () => {
    const { container } = render(<ProfileCreated email="test@example.com" />);
    
    // Check for avatar container
    const avatar = container.querySelector('.rounded-full.bg-gradient-to-br');
    expect(avatar).toBeInTheDocument();
    
    // Check for email text
    expect(screen.getByText('test@example.com')).toBeInTheDocument();
    
    // Check for success text
    expect(screen.getByText('Profile created successfully')).toBeInTheDocument();
  });
});