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

import { Card } from "../Card";

describe("rendering Card", () => {
  describe("initial state", () => {
    it("has default class card", () => {
      const { getByTestId } = render(<Card data-testid="test-id" />);
      expect(getByTestId("test-id")).toHaveClass("card");
    });
  });

  describe("passed props", () => {
    it("renders children", () => {
      const { getByText } = render(<Card>test</Card>);
      expect(getByText("test")).toBeInTheDocument();
    });

    it("has additional class when className is set", () => {
      const { getByTestId } = render(
        <Card data-testid="test-id" className="test-class" />,
      );
      expect(getByTestId("test-id")).toHaveClass("card");
      expect(getByTestId("test-id")).toHaveClass("test-class");
    });

    // Test semantic color classes (excluding background-primary and background-contrast)
    [
      "background-secondary",
      "background-accent",
      "background-accent1-blog",
      "background-accent2-blog",
      "fill-subtle",
      "fill-accent1",
      "fill-accent2",
      "fill-accent3",
      "fill-accent4",
      "fill-accent5",
    ].map((color) => {
      it(`has ${color} class when color is ${color}`, () => {
        const { getByTestId } = render(
          <Card data-testid="test-id" color={color} />,
        );
        expect(getByTestId("test-id")).toHaveClass(color);
      });
    });

    it(`has background-contrast and text-inverse classes when color is background-contrast`, () => {
      const { getByTestId } = render(
        <Card data-testid="test-id" color="background-contrast" />,
      );
      expect(getByTestId("test-id")).toHaveClass("background-contrast");
      expect(getByTestId("test-id")).toHaveClass("text-inverse");
    });

    it(`doesn't have background-primary class when color is background-primary (default)`, () => {
      const { getByTestId } = render(
        <Card data-testid="test-id" color="background-primary" />,
      );
      expect(getByTestId("test-id")).not.toHaveClass("background-primary");
    });

    it(`doesn't have any color class when no color is specified (defaults to background-primary)`, () => {
      const { getByTestId } = render(<Card data-testid="test-id" />);
      expect(getByTestId("test-id")).not.toHaveClass("background-primary");
      expect(getByTestId("test-id")).toHaveClass("card");
    });

    it(`has card--no-border class when noBorder is true`, () => {
      const { getByTestId } = render(<Card data-testid="test-id" noBorder />);
      expect(getByTestId("test-id")).toHaveClass("card--no-border");
    });

    it(`doesn't have card--no-border class when noBorder is false`, () => {
      const { getByTestId } = render(
        <Card data-testid="test-id" noBorder={false} />,
      );
      expect(getByTestId("test-id")).not.toHaveClass("card--no-border");
    });
  });
});