/* eslint-disable formatjs/no-literal-string-in-jsx */
import { describe, expect, it, afterEach } from "vitest"
import { render, screen, cleanup } from "@testing-library/react"

import { ChipStatic } from "./ChipStatic"

afterEach(() => {
  cleanup()
})

describe("ChipStatic", () => {
  describe("rendering", () => {
    it("renders as a span element", () => {
      render(<ChipStatic>Static Chip</ChipStatic>)
      const chip = screen.getByText("Static Chip")
      expect(chip).toBeTruthy()
      expect(chip.tagName).toBe("SPAN")
    })

    it("renders children content", () => {
      render(<ChipStatic>Chip Content</ChipStatic>)
      expect(screen.getByText("Chip Content")).toBeTruthy()
    })

    it("renders with multiple children", () => {
      render(
        <ChipStatic>
          <span>Icon</span>
          Label
        </ChipStatic>
      )
      expect(screen.getByText("Icon")).toBeTruthy()
      expect(screen.getByText("Label")).toBeTruthy()
    })
  })

  describe("color variants", () => {
    it("renders Neutral color (default)", () => {
      render(<ChipStatic color="Neutral">Neutral</ChipStatic>)
      expect(screen.getByText("Neutral")).toBeTruthy()
    })

    it("renders Subtle color", () => {
      render(<ChipStatic color="Subtle">Subtle</ChipStatic>)
      expect(screen.getByText("Subtle")).toBeTruthy()
    })

    it("renders Disabled color", () => {
      render(<ChipStatic color="Disabled">Disabled</ChipStatic>)
      expect(screen.getByText("Disabled")).toBeTruthy()
    })
  })

  describe("sizes", () => {
    it("renders xs size", () => {
      render(<ChipStatic size="xs">Extra Small</ChipStatic>)
      expect(screen.getByText("Extra Small")).toBeTruthy()
    })

    it("renders sm size (default)", () => {
      render(<ChipStatic size="sm">Small</ChipStatic>)
      expect(screen.getByText("Small")).toBeTruthy()
    })

    it("renders lg size", () => {
      render(<ChipStatic size="lg">Large</ChipStatic>)
      expect(screen.getByText("Large")).toBeTruthy()
    })
  })

  describe("typography", () => {
    it("uses uppercase typography by default", () => {
      render(<ChipStatic>Default Case</ChipStatic>)
      expect(screen.getByText("Default Case")).toBeTruthy()
    })

    it("uses lowercase typography when lowerCase is true", () => {
      render(<ChipStatic lowerCase>Lower Case</ChipStatic>)
      expect(screen.getByText("Lower Case")).toBeTruthy()
    })
  })

  describe("props", () => {
    it("applies custom className", () => {
      render(<ChipStatic className="custom-class">Styled</ChipStatic>)
      const chip = screen.getByText("Styled")
      expect(chip.className).toContain("custom-class")
    })
  })

  describe("edge cases", () => {
    it("handles empty string children", () => {
      const emptyString = ""
      const { container } = render(<ChipStatic>{emptyString}</ChipStatic>)
      const span = container.querySelector("span")
      expect(span).toBeTruthy()
    })

    it("handles numeric children", () => {
      render(<ChipStatic>{42}</ChipStatic>)
      expect(screen.getByText("42")).toBeTruthy()
    })
  })
})