import React from 'react';
import {
  Box,
  Card,
  DataList,
  Flex,
  Grid,
  Heading,
  Separator,
  Typo,
} from '../../../../atoms';
import type { CoachingCustomerInfoProps } from '../utils';
import {
  infoList,
  renderDataListItem,
  renderItem,
  sessionList,
} from '../utils';

export function CoachingCustomerInfoMedium({
  customer,
  session,
  children,
  badge,
  onClickCopy,
}: CoachingCustomerInfoProps): React.ReactElement {
  return (
    <Flex direction="column" gap="5">
      {/* 이름, 사명 */}
      <Box>
        <Flex align="center" justify="between" mb="1" width="100%">
          <Heading variant="heading2">
            {customer?.username || '이름 없음'}
          </Heading>
          {badge}
        </Flex>
        <Heading truncate variant="heading4" weight="regular">
          {customer?.company}
        </Heading>
      </Box>

      {children}

      {/* 세션 정보 */}
      <Card size="2">
        <DataList.Root orientation="vertical">
          {sessionList.map((el) =>
            renderDataListItem({
              info: el,
              data: session,
              onClickCopy,
            })
          )}
        </DataList.Root>
      </Card>

      {/* 회원 정보 */}
      <Grid align="center" columns="auto 1fr" gap="3">
        <Heading variant="heading5">고객 정보</Heading>
        <Separator size="4" />
      </Grid>
      <Flex direction="column" gap="4">
        {infoList.map((el) => {
          return (
            <Typo key={el.label}>
              {renderItem({
                info: el,
                data: customer,
                onClickCopy,
              })}
            </Typo>
          );
        })}
      </Flex>
    </Flex>
  );
}
