import React, { FC, ReactNode, ReactType } from 'react';

import Layout from '../../components/Layout';
import Content from '../../components/Content';
import Banner from '../../components/Banner';
import {
  MilaGridColumn,
  MilaGridVoid,
} from '../../index';
import { CardProps } from '../../blocks/Card';
import { PackageListItem } from '../../components/PackageList';
import css from '../EnterprisePartnerPage/index.module.css';

export interface EnterprisePartnerOverviewPageProps {
  pageTitle: string;
  partners?: Array<CardProps>;
  children?: ReactNode;
}

const EnterprisePartnerOverviewPage: FC<EnterprisePartnerOverviewPageProps> = ({
  children,
  partners,
  pageTitle,
}) => (
  <Layout>
    <Banner title={pageTitle} />

    <Content>
      <MilaGridVoid>
        <MilaGridColumn
          columns={['sm-12', 'lg-10', 'xxl-8']}
          offset={['lg-1', 'xxl-2']}
        >
          <div className={css.package__items} style={{ marginBottom: '50px' }}>
            {partners?.map((item, index) => {
              return (
                <PackageListItem
                  item={item}
                  isSelected={true}
                  key={'overview_brand' + index}
                />
              );
            })}
          </div>
          {children}
        </MilaGridColumn>
      </MilaGridVoid>
    </Content>
  </Layout>
);

export default EnterprisePartnerOverviewPage;