import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Dialog, Title, Typography} from '@components';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

export type DescriptionConfig = Nullable<{
  title: string;
  description: string;
  sections?: {section: string; content: string}[];
}>;

export interface Props {
  descriptionConfig: DescriptionConfig;
  onClose: () => void;
}

function DescriptionDialog({descriptionConfig, onClose}: Props) {
  const {t} = useTranslation();
  const {theme} = useTheme();

  return (
    <Dialog
      contentStyle={styles.container}
      footer={{primaryButton: {text: t('general.back'), onPress: onClose}}}
      isVisible={!!descriptionConfig}
      onClose={onClose}
      title={descriptionConfig?.title}>
      {descriptionConfig?.sections?.map(({section, content}) => (
        <View
          key={section}
          style={[
            styles.sectionContainer,
            {backgroundColor: theme.background.layout.default},
          ]}>
          <Title description={content} title={section} size="xs" />
        </View>
      ))}
      <Typography>{descriptionConfig?.description}</Typography>
    </Dialog>
  );
}

export default DescriptionDialog;