import React from 'react';
import { render } from '@testing-library/react';
import { testComponent } from 'lib/test-utils/common';
import { Metadata, MetadataProps } from '../metadata';

describe('<Metadata>', () => {
    const defaultProps: MetadataProps = {
        children: <div>Hello World</div>,
        label: { text: 'Label' },
    };

    const renderComponent = (props?: Partial<MetadataProps>) =>
        render(<Metadata {...defaultProps} {...props} />);

    testComponent(Metadata);

    test('applies style', () => {
        const { getByTestId } = renderComponent({ style: { marginTop: 10 } });
        expect(getByTestId('Metadata')).toHaveStyle({ marginTop: '10px' });
    });

    test('renders children', () => {
        const { getByText } = renderComponent({ ...defaultProps });

        expect(getByText('Hello World')).toBeInTheDocument();
    });

    test('renders label', () => {
        const { getByText } = renderComponent({ ...defaultProps });

        expect(getByText('Label')).toBeInTheDocument();
    });

    test('renders label with label as string', () => {
        const { getByText } = renderComponent({
            ...defaultProps,
            layout: 'horizontal',
            label: 'Custom Label',
        });

        expect(getByText('Custom Label')).toBeInTheDocument();
    });

    test('renders label with horizontal layout', () => {
        const { getByTestId } = renderComponent({
            ...defaultProps,
            layout: 'horizontal',
            label: { text: 'Custom Label' },
        });

        expect(getByTestId('Metadata')).toHaveClass('horizontal');
    });
});