import { render, screen } from '@testing-library/react'
import { EventCard } from './event-card'
import { EventDto } from '@/services/events'

const mockEvent: EventDto = {
  id: '123',
  deviceId: 'device-1',
  eventType: 'meteor',
  capturedAt: '2024-01-01T12:00:00Z',
  mediaUrl: 'https://example.com/image.jpg',
  fileSize: '1024',
  fileType: 'image/jpeg',
  originalFilename: 'meteor.jpg',
  metadata: { location: 'Test Location' },
  validationScore: '0.95',
  isValid: true,
  createdAt: '2024-01-01T12:00:00Z',
}

const mockEventWithoutImage: EventDto = {
  ...mockEvent,
  mediaUrl: '',
  metadata: undefined,
}

describe('EventCard', () => {
  it('renders event information correctly', () => {
    render(<EventCard event={mockEvent} />)
    
    expect(screen.getByText('Type: meteor')).toBeInTheDocument()
    expect(screen.getByText('Location: Test Location')).toBeInTheDocument()
    expect(screen.getByAltText('Event meteor')).toBeInTheDocument()
  })

  it('renders without image when mediaUrl is empty', () => {
    render(<EventCard event={mockEventWithoutImage} />)
    
    expect(screen.getByText('No Image')).toBeInTheDocument()
    expect(screen.getByText('Type: meteor')).toBeInTheDocument()
    expect(screen.queryByText('Location:')).not.toBeInTheDocument()
  })
})