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

describe('NotificationCardSkeleton', () => {
  it('renders the default number of notification rows (4)', () => {
    render(<NotificationCardSkeleton />);
    expect(screen.getAllByRole('listitem')).toHaveLength(4);
  });

  it('renders a custom number of rows', () => {
    render(<NotificationCardSkeleton rows={2} />);
    expect(screen.getAllByRole('listitem')).toHaveLength(2);
  });

  it('does not render a footer by default (showViewAll is false)', () => {
    const { container } = render(<NotificationCardSkeleton />);
    expect(container.querySelector('[data-slot="card-footer"]')).not.toBeInTheDocument();
  });

  it('renders a footer "View all" skeleton when showViewAll is true', () => {
    const { container } = render(<NotificationCardSkeleton showViewAll />);
    expect(container.querySelector('[data-slot="card-footer"]')).toBeInTheDocument();
  });

  it('renders the header title and unread-count badge skeletons', () => {
    const { container } = render(<NotificationCardSkeleton />);
    expect(container.querySelector('[data-slot="card-header"]')).toBeInTheDocument();
    expect(container.querySelector('.h-5.w-6.rounded-full')).toBeInTheDocument();
  });

  it('applies a custom className to the root Card', () => {
    const { container } = render(<NotificationCardSkeleton className="custom-notification" />);
    expect(container.querySelector('[data-slot="card"]')).toHaveClass('custom-notification');
  });
});