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

describe('Card Component', () => {
  describe('正常情况', () => {
    it('应该渲染卡片内容', () => {
      render(
        <Card>
          <p>卡片内容</p>
        </Card>
      );
      expect(screen.getByText('卡片内容')).toBeInTheDocument();
    });

    it('应该渲染标题', () => {
      render(<Card title="卡片标题">内容</Card>);
      expect(screen.getByText('卡片标题')).toBeInTheDocument();
    });

    it('应该渲染操作按钮', () => {
      render(
        <Card
          title="标题"
          action={<button>操作</button>}
        >
          内容
        </Card>
      );
      expect(screen.getByRole('button', { name: '操作' })).toBeInTheDocument();
    });

    it('应该支持不同的变体', () => {
      const { container } = render(<Card variant="default">默认</Card>);
      const cardElement = container.firstChild as HTMLElement;
      expect(cardElement).toHaveClass('bg-white');

      const { container: container2 } = render(<Card variant="bordered">边框</Card>);
      const cardElement2 = container2.firstChild as HTMLElement;
      expect(cardElement2).toHaveClass('border');

      const { container: container3 } = render(<Card variant="elevated">阴影</Card>);
      const cardElement3 = container3.firstChild as HTMLElement;
      expect(cardElement3).toHaveClass('shadow-md');
    });

    it('应该支持不同的尺寸', () => {
      // Note: Card doesn't have size prop, this test demonstrates variant testing
      const { container } = render(<Card variant="bordered">边框卡片</Card>);
      const cardElement = container.firstChild as HTMLElement;
      expect(cardElement).toHaveClass('border', 'border-gray-200');
    });
  });

  describe('边界条件', () => {
    it('应该处理空内容', () => {
      render(<Card></Card>);
      expect(screen.getByText('卡片内容')).toBeInTheDocument();
    });

    it('应该处理没有标题的卡片', () => {
      render(<Card>只有内容</Card>);
      expect(screen.getByText('只有内容')).toBeInTheDocument();
    });
  });

  describe('可访问性', () => {
    it('应该支持自定义 className', () => {
      const { container } = render(<Card className="custom-class">内容</Card>);
      const cardElement = container.firstChild as HTMLElement;
      expect(cardElement).toHaveClass('custom-class');
    });
  });
});
