import React, {memo} from 'react';
import {useTranslation} from 'react-i18next';
import {ListRow} from '@components';

import {styles} from './styles';

interface Props {
  title: string;
  onPress: () => void;
  selectedCount?: number;
  totalCount?: number;
  description?: string;
}

function Section({
  onPress,
  title,
  selectedCount,
  totalCount,
  description,
}: Props) {
  const {t} = useTranslation();

  return (
    <ListRow onPress={onPress} style={styles.container}>
      <ListRow.Title
        description={
          selectedCount && totalCount
            ? t('general.selected_items', {
                selected: selectedCount,
                total: totalCount,
              })
            : description
        }
        title={title}
      />
      <ListRow.SideContent withRightIcon />
    </ListRow>
  );
}

export default memo(Section);