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

export interface SessionUserInfoDetailProps {
  customer: Customer;
  session: Session;
  onClickCopy: (value: string) => void;
}

function SectionWrapper({
  title,
  children,
}: {
  title: string;
  children: React.ReactNode;
}): React.ReactNode {
  return (
    <Box>
      <Grid align="center" columns="auto 1fr" gap="3" mb="5">
        <Heading variant="heading5">{title}</Heading>

        <Separator size="4" />
      </Grid>
      {children}
    </Box>
  );
}

export function SessionUserInfoDetail({
  customer,
  session,
  onClickCopy,
}: SessionUserInfoDetailProps): React.ReactNode {
  return (
    <Flex direction="column" gap="6">
      <SectionWrapper title="세션 정보">
        <DataList.Root>
          {sessionList.map((info) =>
            renderDataListItem({ info, data: session, onClickCopy })
          )}
        </DataList.Root>
      </SectionWrapper>

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