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

export function CoachingCustomerInfoLarge({
  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>
          {sessionList.map((el) =>
            renderDataListItem({
              info: el,
              data: session,
              onClickCopy,
            })
          )}
        </DataList.Root>
      </Card>

      {/* 회원 정보 */}
      <Separator size="4" />
      <DataList.Root>
        {infoList.map((info) =>
          renderDataListItem({
            info,
            data: customer,
            onClickCopy,
          })
        )}
      </DataList.Root>
    </Flex>
  );
}
