import React from "react"
import { render, screen } from '@testing-library/react'
import Badge from "../index" 

// Render correct variant css when outline || solid 
test('Render green outline badge', () => {
  render(<Badge data-testid="badge" color="green" variant="outline">Pro</Badge>)
  expect(screen.getByTestId("badge")).toHaveClass("bg-transparent border-green-600 text-green-600")
})

test('Render green solid badge', () => {
  render(<Badge data-testid="badge" color="green" variant="solid">Pro</Badge>)
  expect(screen.getByTestId("badge")).toHaveClass("bg-green-500 border-green-500 text-white")
})

test('Render green light badge', () => {
  render(<Badge data-testid="badge" color="green" variant="light">Pro</Badge>)
  expect(screen.getByTestId("badge")).toHaveClass("bg-green-50 border-green-50 text-green-600")
})

test('Render red solid badge', () => {
  render(<Badge data-testid="badge" color="red" variant="solid">Pro</Badge>)
  expect(screen.getByTestId("badge")).toHaveClass("bg-red-500 border-red-500 text-white")
})

test('Render red outline badge', () => {
  render(<Badge data-testid="badge" color="red" variant="outline">Pro</Badge>)
  expect(screen.getByTestId("badge")).toHaveClass("bg-transparent border-red-600 text-red-600")
})

test('Render red light badge', () => {
  render(<Badge data-testid="badge" color="red" variant="light">Pro</Badge>)
  expect(screen.getByTestId("badge")).toHaveClass("bg-red-50 border-red-50 text-red-600")
})

test('Render gray outline badge', () => {
  render(<Badge data-testid="badge" color="gray" variant="outline">Pro</Badge>)
  expect(screen.getByTestId("badge")).toHaveClass("bg-transparent border-gray-800 text-gray-800")
})

test('Render gray solid badge', () => {
  render(<Badge data-testid="badge" color="gray" variant="solid">Pro</Badge>)
  expect(screen.getByTestId("badge")).toHaveClass("bg-gray-800 border-gray-800 text-white")
})

test('Render gray light badge', () => {
  render(<Badge data-testid="badge" color="gray" variant="light">Pro</Badge>)
  expect(screen.getByTestId("badge")).toHaveClass("bg-gray-50 border-gray-50 text-gray-800")
})

test('Render yellow outline badge', () => {
  render(<Badge data-testid="badge" color="yellow" variant="outline">Pro</Badge>)
  expect(screen.getByTestId("badge")).toHaveClass("bg-transparent border-yellow-600 text-yellow-600")
})

test('Render yellow solid badge', () => {
  render(<Badge data-testid="badge" color="yellow" variant="solid">Pro</Badge>)
  expect(screen.getByTestId("badge")).toHaveClass("bg-yellow-500 border-yellow-500 text-white")
})

test('Render yellow light badge', () => {
  render(<Badge data-testid="badge" color="yellow" variant="light">Pro</Badge>)
  expect(screen.getByTestId("badge")).toHaveClass("bg-yellow-50 border-yellow-50 text-yellow-600")
})

test('Render blue solid badge', () => {
  render(<Badge data-testid="badge" color="blue" variant="solid">Pro</Badge>)
  expect(screen.getByTestId("badge")).toHaveClass("bg-blue-500 border-blue-500 text-white")
})

test('Render blue outline badge', () => {
  render(<Badge data-testid="badge" color="blue" variant="outline">Pro</Badge>)
  expect(screen.getByTestId("badge")).toHaveClass("bg-transparent border-blue-600 text-blue-600")
})

test('Render blue light badge', () => {
  render(<Badge data-testid="badge" color="blue" variant="light">Pro</Badge>)
  expect(screen.getByTestId("badge")).toHaveClass("bg-blue-50 border-blue-50 text-blue-600")
})

// Badge needs a to include any className properties 
test('classname is added to the badge', () => {
  render(<Badge data-testid="badge" color="yellow" variant="solid" className="mr-2 ml-5">Pro</Badge>)
  expect(screen.getByTestId("badge")).toHaveClass("bg-yellow-500 border-yellow-500 text-white mr-2 ml-5")
})
