import React, {FC} from 'react';
import {StyleProp, View, ViewStyle} from 'react-native';
import {IconProps} from '@tabler/icons-react-native';
import {Avatar, Typography} from '@components';

import {styles} from './styles';

interface Props {
  icon: FC<IconProps>;
  title: string;
  description: string;
  style?: StyleProp<ViewStyle>;
}

export function ChatEmptyState({icon, title, description, style}: Props) {
  return (
    <View style={[styles.empty, style]}>
      <Avatar
        Icon={icon}
        size="lg"
        variant="primary"
        style={styles.emptyAvatar}
      />
      <Typography variant="m" weight="semiBold" align="center">
        {title}
      </Typography>
      <Typography align="center">{description}</Typography>
    </View>
  );
}