import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconListDetails} from '@tabler/icons-react-native';
import {Avatar, Typography} from '@components';

import {styles} from './styles';

interface EmptyGroupsProps {
  title?: string;
}

function EmptyGroups({title = 'group.no_pinned_groups'}: EmptyGroupsProps) {
  const {t} = useTranslation();
  return (
    <View style={styles.container}>
      <View style={styles.iconContainer}>
        <Avatar Icon={IconListDetails} size="lg" />
      </View>
      <Typography align="center" variant="s">
        {t(title)}
      </Typography>
    </View>
  );
}

export default EmptyGroups;