import { render, screen } from '@testing-library/react';
import Hero from '@/app/components/Hero';

// Mock next-intl
jest.mock('next-intl', () => ({
  useLocale: () => 'en',
  useTranslations: () => (key: string) => {
    const messages: Record<string, string> = {
      description: 'Dennis is a student and passionate self-hoster.',
      ctaWork: 'View My Work'
    };
    return messages[key] || key;
  },
}));

// Mock next/image
interface ImageProps {
  src: string;
  alt: string;
  fill?: boolean;
  priority?: boolean;
  [key: string]: unknown;
}

jest.mock('next/image', () => ({
  __esModule: true,
  default: ({ src, alt, fill, priority, ...props }: ImageProps) => (
    <img 
      src={src} 
      alt={alt} 
      data-fill={fill?.toString()} 
      data-priority={priority?.toString()} 
      {...props} 
    />
  ),
}));

describe('Hero', () => {
  it('renders the hero section correctly', () => {
    render(<Hero />);
    
    // Check for the main headlines (defaults in Hero.tsx)
    expect(screen.getByText('Building')).toBeInTheDocument();
    expect(screen.getByText('Stuff.')).toBeInTheDocument();
    
    // Check for the description from our mock
    expect(screen.getByText(/Dennis is a student/i)).toBeInTheDocument();
    
    // Check for the image
    expect(screen.getByAltText('Dennis Konkol')).toBeInTheDocument();
    
    // Check for CTA
    expect(screen.getByText('View My Work')).toBeInTheDocument();
  });
});