import React from 'react';
import {useTranslation} from 'react-i18next';
import {IconProgressCheck} from '@tabler/icons-react-native';
import {Accordion, Button, Typography} from '@components';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  show: boolean;
  onPress: () => void;
  isApprover?: boolean;
  totalPendingPosts: number;
}

function PendingApprovalAlert({
  show,
  onPress,
  isApprover,
  totalPendingPosts,
}: Props) {
  const {t} = useTranslation();
  const {theme} = useTheme();

  return show ? (
    <Accordion style={styles.accordion}>
      <Accordion.Header>
        <Accordion.Avatar Icon={IconProgressCheck} />
        <Accordion.Title
          title={t(
            isApprover
              ? 'post.pending_approval_alert.title'
              : 'group.pending_approval_posts_amount',
            {count: totalPendingPosts},
          )}
        />
        <Accordion.Icon />
      </Accordion.Header>
      <Accordion.Content>
        <Typography variant="xs" color={theme.text.neutral.lighter}>
          {t(
            isApprover
              ? 'post.pending_approval_alert.description'
              : 'group.post_needs_admin_approval',
            {count: totalPendingPosts},
          )}
        </Typography>
        <Button
          onPress={onPress}
          text={t(
            isApprover
              ? 'post.pending_approval_alert.button'
              : 'group.see_all_pending_approval',
          )}
          size="sm"
        />
      </Accordion.Content>
    </Accordion>
  ) : null;
}

export default PendingApprovalAlert;