import { ContentTree } from '@financial-times/content-tree'
import React from 'react'
import { ContentProps } from '../../types'
import { ContentLayout } from '../../ContentLayout'

// required for items with nested external items that need to resolve assets
interface ImagePairProps extends ContentProps<ContentTree.transit.ImagePair> {}

//layout component wrap.
const ImagePair: React.FC<React.PropsWithChildren<ImagePairProps>> = ({
  children,
}) => {
  if (!Array.isArray(children) || children.length !== 2) {
    return null
  }
  return (
    <ContentLayout dataLayout="full-grid">
      <section className="cp-image-pair">{children}</section>
    </ContentLayout>
  )
}

export default ImagePair