import type { ListItemProps } from '~/src/components/ListItem';
import type { FC, ReactNode } from 'react';

import Box from '~/src/components/Box';
import Card from '~/src/components/Card';
import { InputLabelDescription } from '~/src/components/InputLabel';
import ListItem from '~/src/components/ListItem';
import Text from '~/src/components/Text';
import { SECTION_SPACING } from '../constants';

export const AccountSectionTitle: FC<{ text: string }> = ({ text }) => (
  <Text
    tag="h2"
    size="1.5rem"
    margin="0 0 1.15rem 0.1em"
    color="#999"
    isBold
    flexGrow
    letterSpacing={0.02}
  >
    {text}
  </Text>
);

export const AccountSection: FC<{
  title?: string;
  description?: ReactNode;
  testId?: string;
  children?: ReactNode;
}> = ({ title, children, description, testId }) => (
  <Box margin={`${SECTION_SPACING} 0 0`} tag="section" data-testid={testId}>
    {title && <AccountSectionTitle text={title} />}
    {children}
    {description && (
      <InputLabelDescription value={description} margin="1.1rem 0 0" />
    )}
  </Box>
);

export const AccountListCard: FC<{
  items: (ListItemProps & { key: string })[] | undefined;
  renderAfter?: () => ReactNode;
  renderEmpty?: () => ReactNode;
}> = ({ items, renderAfter = () => null, renderEmpty = () => null }) => (
  <Card tag="ul">
    <Box padding="0.8rem 2rem">
      {items?.length
        ? items.map(({ key, ...rest }) => {
            return (
              <ListItem
                key={key}
                height="6rem"
                fontSize="1.8rem"
                imageSize="4.2rem"
                {...rest}
              />
            );
          })
        : renderEmpty()}
    </Box>
    {renderAfter()}
  </Card>
);