import React from 'react'
import { render } from '@testing-library/react'
import { ContentLayout } from '../index'

describe('ContentLayout', () => {
  it('renders with full-grid layout', () => {
    const { container } = render(
      <ContentLayout dataLayout="full-grid">
        <div>Test content</div>
      </ContentLayout>
    )

    expect(container).toMatchSnapshot()
  })

  it('renders with any accepted layout', () => {
    const { container } = render(
      <ContentLayout dataLayout="mid-grid">
        <span>Inline content</span>
      </ContentLayout>
    )

    expect(container).toMatchSnapshot()
  })

  it('renders with multiple children', () => {
    const { container } = render(
      <ContentLayout dataLayout="mid-grid">
        <h1>Title</h1>
        <p>Paragraph content</p>
        <div>Additional content</div>
      </ContentLayout>
    )

    expect(container).toMatchSnapshot()
  })

  it('renders treating no dataLayout as default inline)', () => {
    const { container } = render(
      <ContentLayout>
        <div>Empty layout content</div>
      </ContentLayout>
    )

    expect(container).toMatchSnapshot()
  })

  it('renders with inset-left layout', () => {
    const { container } = render(
      <ContentLayout dataLayout="inset-left">
        <div>Inset left content</div>
      </ContentLayout>
    )

    expect(container).toMatchSnapshot()
  })
})