import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import {
    Card,
    CardHeader,
    CardTitle,
    CardDescription,
    CardContent,
    CardFooter,
} from '@/Components/ui/card';

describe('Card', () => {
    it('renders children', () => {
        render(<Card>Card Body</Card>);
        expect(screen.getByText('Card Body')).toBeInTheDocument();
    });

    it('has data-slot="card"', () => {
        render(<Card>Test</Card>);
        expect(screen.getByText('Test')).toHaveAttribute('data-slot', 'card');
    });

    it('merges custom className', () => {
        render(<Card className="extra-class">Custom</Card>);
        expect(screen.getByText('Custom').className).toContain('extra-class');
    });
});

describe('CardHeader', () => {
    it('has data-slot="card-header"', () => {
        render(<CardHeader>Header</CardHeader>);
        expect(screen.getByText('Header')).toHaveAttribute('data-slot', 'card-header');
    });
});

describe('CardTitle', () => {
    it('has data-slot="card-title"', () => {
        render(<CardTitle>Title</CardTitle>);
        expect(screen.getByText('Title')).toHaveAttribute('data-slot', 'card-title');
    });

    it('renders as h3', () => {
        render(<CardTitle>Title</CardTitle>);
        expect(screen.getByText('Title').tagName).toBe('H3');
    });
});

describe('CardDescription', () => {
    it('has data-slot="card-description"', () => {
        render(<CardDescription>Description</CardDescription>);
        expect(screen.getByText('Description')).toHaveAttribute('data-slot', 'card-description');
    });
});

describe('CardContent', () => {
    it('has data-slot="card-content"', () => {
        render(<CardContent>Content</CardContent>);
        expect(screen.getByText('Content')).toHaveAttribute('data-slot', 'card-content');
    });
});

describe('CardFooter', () => {
    it('has data-slot="card-footer"', () => {
        render(<CardFooter>Footer</CardFooter>);
        expect(screen.getByText('Footer')).toHaveAttribute('data-slot', 'card-footer');
    });
});

describe('Card composition', () => {
    it('renders all sub-components together', () => {
        render(
            <Card>
                <CardHeader>
                    <CardTitle>My Card</CardTitle>
                    <CardDescription>A description</CardDescription>
                </CardHeader>
                <CardContent>Body text</CardContent>
                <CardFooter>Footer text</CardFooter>
            </Card>,
        );
        expect(screen.getByText('My Card')).toBeInTheDocument();
        expect(screen.getByText('A description')).toBeInTheDocument();
        expect(screen.getByText('Body text')).toBeInTheDocument();
        expect(screen.getByText('Footer text')).toBeInTheDocument();
    });
});