import React from 'react';
import { Box, Flex, Grid, Heading, Typo } from '../../../../atoms';
import type { CoachingCustomerInfoProps } from '../utils';

export function CoachingCustomerInfoSmall({
  customer,
  children,
  badge,
}: CoachingCustomerInfoProps): React.ReactElement {
  return (
    <Flex
      direction={{ initial: 'column', xs: 'row' }}
      gap="3"
      justify="between"
    >
      {/* 이름, 사명 */}
      <Box>
        <Grid align="center" columns="auto auto 1fr" gapX="3">
          <Heading variant="heading3">
            {customer?.username || '이름 없음'}
          </Heading>
          <Typo color="gray" truncate variant="body">
            {customer?.company}
          </Typo>
          <Box style={{ justifySelf: 'end' }}>{badge}</Box>
        </Grid>
      </Box>
      {children}
    </Flex>
  );
}
