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

interface InfoPairProps 
    extends ContentProps<Omit<ContentTree.InfoPair, 'children'>> {}

const InfoPair: React.FC<React.PropsWithChildren<InfoPairProps>> = ({ 
    content: { title }, 
    children 
}) => {
    return (
        <ContentLayout>
            <div className="cp-info-pair">
                {title && <h4 className="cp-info-pair__title o3-type-title-md">{title}</h4>}
                <div className="cp-info-pair__cards">
                    {children}
                </div>
            </div>
        </ContentLayout>
    );
}

export default InfoPair;