import { render, screen } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { Surface, SurfaceElevated } from '../surface';

describe('Surface', () => {
  it('renders children', () => {
    render(<Surface>Content</Surface>);
    expect(screen.getByText('Content')).toBeInTheDocument();
  });

  it('has bg-background class', () => {
    render(<Surface data-testid="s">x</Surface>);
    expect(screen.getByTestId('s')).toHaveClass('bg-background');
  });

  it('has rounded-lg class', () => {
    render(<Surface data-testid="s">x</Surface>);
    expect(screen.getByTestId('s')).toHaveClass('rounded-lg');
  });

  it('merges custom className', () => {
    render(<Surface data-testid="s" className="p-4">x</Surface>);
    expect(screen.getByTestId('s')).toHaveClass('p-4');
  });
});

describe('SurfaceElevated', () => {
  it('renders children', () => {
    render(<SurfaceElevated>Elevated</SurfaceElevated>);
    expect(screen.getByText('Elevated')).toBeInTheDocument();
  });

  it('has bg-background-elevated class', () => {
    render(<SurfaceElevated data-testid="se">x</SurfaceElevated>);
    expect(screen.getByTestId('se')).toHaveClass('bg-background-elevated');
  });

  it('has shadow-elevation-1 class', () => {
    render(<SurfaceElevated data-testid="se">x</SurfaceElevated>);
    expect(screen.getByTestId('se')).toHaveClass('shadow-elevation-1');
  });
});