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

// Mock the Inertia usePage hook
vi.mock('@inertiajs/react', () => ({
    usePage: () => ({
        props: {
            auth: {
                permissions: ['user.edit', 'role.view'],
            },
        },
    }),
}));

describe('<Can />', () => {
    it('renders children when permission is granted', () => {
        render(
            <Can ability="user.edit">
                <button>Edit Button</button>
            </Can>
        );
        expect(screen.getByRole('button', { name: /edit button/i })).toBeDefined();
    });

    it('renders fallback when permission is denied', () => {
        render(
            <Can ability="user.delete" fallback={<span>No Access</span>}>
                <button>Delete Button</button>
            </Can>
        );
        expect(screen.getByText('No Access')).toBeDefined();
        expect(screen.queryByRole('button')).toBeNull();
    });

    it('handles array of abilities (OR logic)', () => {
        render(
            <Can ability={['user.delete', 'role.view']}>
                <div>Visible Content</div>
            </Can>
        );
        expect(screen.getByText('Visible Content')).toBeDefined();
    });
});