import * as React from 'react';

import Connections from 'containers/connections/Connections';
import ConnectionDetail from 'containers/connection/ConnectionDetail';

import { ProfileDetails } from 'components/profile-detail/ProfileDetails';
import { AlltSamanPaymentStatusBar } from 'components/payment-status-bar/AlltSamanPaymentStatusBar';

interface IBundleProps {
  profile: any;
  packId: string;
  onSelect: any;
  onCancel: any;
}

export const Bundle = ({ profile, packId, onSelect, onCancel }: IBundleProps) => {
  return (
    <>
      {profile?.rateplan?.typeId !== 'vip_service_bundle' && (
        <AlltSamanPaymentStatusBar subscriptionId={profile.subscriptionId} />
      )}
      <ProfileDetails
        detail={<ConnectionDetail profile={profile} packId={packId} onCancel={onCancel} />}
      >
        <Connections profile={profile} onSelect={onSelect} selectedPack={packId} />
      </ProfileDetails>
    </>
  );
};