import React, {useMemo} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {RenderSceneProps, TabItem, Tabs} from '@components';
import {PostRequestActionType} from '@modules/post/interfaces';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

export type PendingApprovalPostsTabsRenderScene = (
  props: RenderSceneProps,
) => React.ReactNode;

export interface PendingApprovalPostsTabsProps {
  renderScene: PendingApprovalPostsTabsRenderScene;
}

export function PendingApprovalPostsTabs({
  renderScene,
}: PendingApprovalPostsTabsProps) {
  const {t} = useTranslation();
  const {theme} = useTheme();

  const routes = useMemo<TabItem<PostRequestActionType>[]>(
    () => [
      {
        key: 'CREATION',
        label: t('post.new_posts_tab'),
      },
      {
        key: 'EDITION',
        label: t('post.edited_posts'),
      },
    ],
    [t],
  );

  return (
    <View
      style={[
        styles.container,
        {backgroundColor: theme.background.elements.grey},
      ]}>
      <Tabs
        routes={routes}
        renderScene={renderScene}
        backgroundColor="background.elements.grey"
        fullWidth
        tabContainerStyle={styles.tabsContainer}
      />
    </View>
  );
}