import React from 'react';
import { BundlePage } from '../BundlePage';
import ProductBundleViewer from '../../../components/product-bundle-viewer/ProductBundleViewer';
import ProductBundles from '../../../components/product-bundles/ProductBundles';
import BundleBanner from '../../../components/product-banner/BundleBanner';
import BundleTabsMenu from '../../../components/product-tabs-menu/BundleTabsMenu';
import { productBundleMock } from '../../../../mocks/product/productBundles';

export default {
    title: 'Composite Demos/Bundle Page',
    component: BundlePage,
    parameters: {
        layout: 'fullscreen'
    }
};

export const Default = () => (
    <BundlePage
        menu={<BundleTabsMenu data={productBundleMock.bundle} />}
        banner={<BundleBanner data={productBundleMock.bundle} />}
        header={<ProductBundleViewer data={productBundleMock.bundle} />}
        bundle={<ProductBundles data={productBundleMock.bundle} />}
    />
);
