import React from "react";
import { PlayButton } from "./helper";

import { render, screen } from "@testing-library/react";

jest.mock("@shared/components/material-icon", () => ({
  MaterialIcon: ({ name, size, fill, className }: any) => (
    <span
      data-testid="material-icon"
      data-name={name}
      data-size={size}
      data-fill={fill}
      className={className}
    />
  ),
}));

describe("PlayButton", () => {
  it("renders button with aria-label", () => {
    render(<PlayButton />);
    expect(
      screen.getByRole("button", { name: "Play button" })
    ).toBeInTheDocument();
  });

  it("renders MaterialIcon with play_arrow", () => {
    render(<PlayButton />);
    expect(screen.getByTestId("material-icon")).toHaveAttribute(
      "data-name",
      "play_arrow"
    );
  });

  it("applies text-text-brand when isHovered is true", () => {
    render(<PlayButton isHovered={true} />);
    expect(screen.getByTestId("material-icon").className).toContain(
      "text-text-brand"
    );
    expect(screen.getByTestId("material-icon").className).not.toContain(
      "text-slate-500"
    );
  });

  it("applies text-slate-500 when isHovered is false", () => {
    render(<PlayButton isHovered={false} />);
    expect(screen.getByTestId("material-icon").className).toContain(
      "text-slate-500"
    );
  });

  it("applies containerClassName when provided", () => {
    render(<PlayButton containerClassName="custom-class" />);
    expect(screen.getByRole("button").className).toContain("custom-class");
  });

  it("does not add extra class when containerClassName is undefined", () => {
    const { container } = render(<PlayButton />);
    const btn = container.querySelector("button");
    expect(btn?.className).not.toContain("undefined");
  });
});