import React from 'react';
import {View} from 'react-native';
import {Typography, Image} from '@components';
import {useTheme} from '@shared/theme';

import {PinnedMessageDisplayResult} from '../../hooks/usePinnedMessageDisplay';
import {styles} from './styles';

type Props = PinnedMessageDisplayResult;

export function PinnedMessage({displayText, PrefixIcon, thumbnailUrl}: Props) {
  const {theme, iconSizes} = useTheme();

  return (
    <View style={styles.container}>
      {PrefixIcon && (
        <PrefixIcon
          color={theme.text.neutral.default}
          size={iconSizes.x4}
          style={styles.prefixIcon}
        />
      )}
      <Typography
        numberOfLines={1}
        variant="xs"
        color={theme.text.neutral.default}
        style={styles.text}>
        {displayText}
      </Typography>
      {thumbnailUrl ? (
        <Image
          source={{uri: thumbnailUrl}}
          style={styles.thumbnail}
          contentFit="cover"
          withAuthHeader
          timeout={15_000}
        />
      ) : null}
    </View>
  );
}
