import React from 'react';
import { Box } from '../../../../atoms';
import type { CoachingCustomerInfoProps } from '../utils';
import { CoachingCustomerInfoSmall } from './small';
import { CoachingCustomerInfoMedium } from './medium';
import { CoachingCustomerInfoLarge } from './large';

export {
  CoachingCustomerInfoLarge,
  CoachingCustomerInfoMedium,
  CoachingCustomerInfoSmall,
};

export { type CoachingCustomerInfoProps };

export function CoachingCustomerInfo(
  props: CoachingCustomerInfoProps
): React.ReactNode {
  return (
    <>
      <Box display={{ initial: 'block', sm: 'none', md: 'none' }}>
        <CoachingCustomerInfoSmall {...props} />
      </Box>
      <Box display={{ initial: 'none', sm: 'block', md: 'none' }}>
        <CoachingCustomerInfoMedium {...props} />
      </Box>
      <Box display={{ initial: 'none', sm: 'none', md: 'block' }}>
        <CoachingCustomerInfoLarge {...props} />
      </Box>
    </>
  );
}
