import { experimental_AstroContainer as AstroContainer } from "astro/container";
import { describe, it, expect } from "vitest";
import MovieCard from "../MovieCard.astro";

describe("MovieCard", () => {
	const mockMovie = {
		title: "Test Movie",
		poster: "/test-poster.jpg",
	};

	it("renders with required props", async () => {
		const container = await AstroContainer.create();
		const result = await container.renderToString(MovieCard, {
			props: mockMovie,
		});

		expect(result).toContain('class="movie-card"');
		expect(result).toContain("Test Movie");
		expect(result).toContain('src="/test-poster.jpg"');
		expect(result).toContain('alt="Test Movie"');
		expect(result).toContain('class="movie-title"');
		expect(result).toContain('class="movie-poster"');
	});

	it("renders as div by default", async () => {
		const container = await AstroContainer.create();
		const result = await container.renderToString(MovieCard, {
			props: mockMovie,
		});

		expect(result).toContain('<div class="movie-card"');
	});

	it("renders as anchor when href provided", async () => {
		const container = await AstroContainer.create();
		const result = await container.renderToString(MovieCard, {
			props: { ...mockMovie, href: "/movie/123" },
		});

		expect(result).toContain('<a class="movie-card"');
		expect(result).toContain('href="/movie/123"');
	});

	it("displays movie year and genre", async () => {
		const container = await AstroContainer.create();
		const result = await container.renderToString(MovieCard, {
			props: { ...mockMovie, year: 2023, genre: "Action" },
		});

		expect(result).toContain('class="movie-meta"');
		expect(result).toContain("2023");
		expect(result).toContain("Action");
		expect(result).toContain("•");
	});

	it("displays only year when genre not provided", async () => {
		const container = await AstroContainer.create();
		const result = await container.renderToString(MovieCard, {
			props: { ...mockMovie, year: 2023 },
		});

		expect(result).toContain("2023");
		expect(result).not.toContain("•");
	});

	it("displays only genre when year not provided", async () => {
		const container = await AstroContainer.create();
		const result = await container.renderToString(MovieCard, {
			props: { ...mockMovie, genre: "Drama" },
		});

		expect(result).toContain("Drama");
		expect(result).not.toContain("•");
	});

	it("displays rating when provided", async () => {
		const container = await AstroContainer.create();
		const result = await container.renderToString(MovieCard, {
			props: { ...mockMovie, rating: 8.5 },
		});

		expect(result).toContain('class="movie-rating"');
		expect(result).toContain("⭐");
		expect(result).toContain("8.5/10");
	});

	it("does not display rating when not provided", async () => {
		const container = await AstroContainer.create();
		const result = await container.renderToString(MovieCard, {
			props: mockMovie,
		});

		expect(result).not.toContain('class="movie-rating"');
	});

	it("applies custom classes", async () => {
		const container = await AstroContainer.create();
		const result = await container.renderToString(MovieCard, {
			props: { ...mockMovie, class: "featured-movie" },
		});

		expect(result).toContain("movie-card featured-movie");
	});

	it("applies lazy loading to poster", async () => {
		const container = await AstroContainer.create();
		const result = await container.renderToString(MovieCard, {
			props: mockMovie,
		});

		expect(result).toContain('loading="lazy"');
	});
});