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

interface User {
  id: string;
  name: string;
  email: string;
}

const columns = [
  { key: 'name', header: 'Nome' },
  { key: 'email', header: 'E-mail' },
];

const data: User[] = [
  { id: '1', name: 'Alice', email: 'alice@test.com' },
  { id: '2', name: 'Bob', email: 'bob@test.com' },
];

describe('DataTable', () => {
  it('renders columns and data correctly', () => {
    render(<DataTable columns={columns} data={data} rowKey="id" />);

    expect(screen.getByText('Nome')).toBeInTheDocument();
    expect(screen.getByText('E-mail')).toBeInTheDocument();
    expect(screen.getByText('Alice')).toBeInTheDocument();
    expect(screen.getByText('bob@test.com')).toBeInTheDocument();
  });

  it('shows skeleton when isLoading is true', () => {
    render(<DataTable columns={columns} data={[]} rowKey="id" isLoading />);

    const skeletons = document.querySelectorAll('.animate-pulse');
    expect(skeletons.length).toBe(5);
  });

  it('shows empty state when data is empty', () => {
    render(
      <DataTable
        columns={columns}
        data={[]}
        rowKey="id"
        emptyMessage="Nenhum usuário encontrado"
      />,
    );

    expect(screen.getByText('Nenhum usuário encontrado')).toBeInTheDocument();
  });

  it('uses custom render function for columns', () => {
    const columnsWithRender = [
      {
        key: 'name',
        header: 'Nome',
        render: (item: User) => <strong>{item.name.toUpperCase()}</strong>,
      },
    ];

    render(<DataTable columns={columnsWithRender} data={data} rowKey="id" />);

    expect(screen.getByText('ALICE')).toBeInTheDocument();
  });
});