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

import {WelcomeConfig} from '../../../../interfaces';
import {WelcomeDescription} from '../WelcomeDescription';
import {WelcomeHeaderSkeleton} from './components/WelcomeHeaderSkeleton';
import {styles} from './styles';

interface Props {
  isLoading: boolean;
  data: WelcomeConfig | undefined;
  moduleName: string;
}

export const WelcomeHeader = ({isLoading, data, moduleName}: Props) => {
  const {theme, iconSizes} = useTheme();

  if (isLoading) {
    return <WelcomeHeaderSkeleton />;
  }

  const title = data?.title || moduleName;
  const description = data?.description;
  const imageUrl = data?.imageUrl;

  return (
    <View
      style={[
        styles.container,
        {
          backgroundColor: theme.background.elements.default,
          borderColor: theme.border.neutral.default,
        },
      ]}>
      {imageUrl ? (
        <Image source={{uri: imageUrl}} style={styles.coverImage} />
      ) : (
        <View
          style={[
            styles.defaultImageContainer,
            {backgroundColor: theme.button.background.primary.default},
          ]}>
          <IconBooks
            size={iconSizes.x12}
            color={theme.background.layout.brand}
          />
        </View>
      )}
      <View style={styles.titleContainer}>
        <Typography
          variant="m"
          weight="semiBold"
          color={theme.text.neutral.default}>
          {title}
        </Typography>
        {!!description && <WelcomeDescription description={description} />}
      </View>
    </View>
  );
};