import { fireEvent, render, screen } from "@testing-library/react";
import { ReviewSection } from "../../components/ReviewSection";
import type { Review } from "../../types";

const reviews: Review[] = [
  { id: "1", author: "Aino", rating: 5, text: "Huippu", status: "approved", date: "2024-01-01" },
  { id: "2", author: "Bea", rating: 4, text: "Hyva", status: "approved", date: "2024-01-02" },
  { id: "3", author: "Ceci", rating: 1, text: "Huono", status: "rejected", date: "2024-01-03" },
];

describe("ReviewSection", () => {
  it("opens modal to write review", () => {
    render(<ReviewSection reviews={reviews} />);

    const button = screen.getByRole("button", { name: /Kirjoita arvostelu/i });
    fireEvent.click(button);

    expect(screen.getByPlaceholderText(/Matti Meikäläinen/i)).toBeInTheDocument();
  });

  it("filters reviews by rating", () => {
    render(<ReviewSection reviews={reviews} />);

    const fiveStars = screen.getByRole("button", { name: /^5$/ });
    fireEvent.click(fiveStars);

    expect(screen.getByText("Huippu")).toBeInTheDocument();
    expect(screen.queryByText("Hyva")).not.toBeInTheDocument();
  });
});