import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { PayoutStateBadge } from '../payout-state-badge';

describe('PayoutStateBadge', () => {
  it('renders scheduled with slate colors', () => {
    render(<PayoutStateBadge state="scheduled" />);
    const badge = screen.getByTestId('payout-state-badge');
    expect(badge.textContent).toBe('Scheduled');
    expect(badge.className).toContain('slate');
    expect(badge.getAttribute('data-state')).toBe('scheduled');
  });

  it('renders in_flight with sky colors and "In flight" label', () => {
    render(<PayoutStateBadge state="in_flight" />);
    const badge = screen.getByTestId('payout-state-badge');
    expect(badge.textContent).toBe('In flight');
    expect(badge.className).toContain('sky');
  });

  it('renders succeeded as "Cleared" with forest colors', () => {
    render(<PayoutStateBadge state="succeeded" />);
    const badge = screen.getByTestId('payout-state-badge');
    expect(badge.textContent).toBe('Cleared');
    expect(badge.className).toContain('forest');
  });

  it('renders failed with rose colors', () => {
    render(<PayoutStateBadge state="failed" />);
    const badge = screen.getByTestId('payout-state-badge');
    expect(badge.textContent).toBe('Failed');
    expect(badge.className).toContain('rose');
  });

  it('renders void as "Voided" with stone colors', () => {
    render(<PayoutStateBadge state="void" />);
    const badge = screen.getByTestId('payout-state-badge');
    expect(badge.textContent).toBe('Voided');
    expect(badge.className).toContain('stone');
  });
});