import { render, screen } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '../table';

describe('Table', () => {
  it('renders a complete table structure', () => {
    render(
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Name</TableHead>
            <TableHead>Price</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow>
            <TableCell>Apartment</TableCell>
            <TableCell>1,000,000 VND</TableCell>
          </TableRow>
        </TableBody>
      </Table>,
    );

    expect(screen.getByRole('table')).toBeInTheDocument();
    expect(screen.getByText('Name')).toBeInTheDocument();
    expect(screen.getByText('Price')).toBeInTheDocument();
    expect(screen.getByText('Apartment')).toBeInTheDocument();
    expect(screen.getByText('1,000,000 VND')).toBeInTheDocument();
  });

  it('renders multiple rows', () => {
    render(
      <Table>
        <TableBody>
          <TableRow><TableCell>Row 1</TableCell></TableRow>
          <TableRow><TableCell>Row 2</TableCell></TableRow>
          <TableRow><TableCell>Row 3</TableCell></TableRow>
        </TableBody>
      </Table>,
    );

    expect(screen.getAllByRole('row')).toHaveLength(3);
  });

  it('applies custom className to table elements', () => {
    render(
      <Table>
        <TableBody>
          <TableRow data-testid="row" className="highlight">
            <TableCell data-testid="cell" className="bold">Data</TableCell>
          </TableRow>
        </TableBody>
      </Table>,
    );

    expect(screen.getByTestId('row')).toHaveClass('highlight');
    expect(screen.getByTestId('cell')).toHaveClass('bold');
  });
});