import React from 'react';
import {CardContainer, Typography, Image, Skeleton} from '@components';
import {LinkedInstance} from '@modules/group/interfaces';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

const MultiCompanyItem = ({item}: {item: LinkedInstance}) => {
  const {theme} = useTheme();
  return (
    <CardContainer style={styles.multiCompanyItemContainer}>
      <Image
        source={{uri: item.instanceLogo}}
        style={styles.image}
        contentFit="contain"
      />
      <Typography
        align="center"
        color={theme.text.neutral.lighter}
        variant="xxs">
        {item.instanceName}
      </Typography>
    </CardContainer>
  );
};

MultiCompanyItem.Skeleton = () => (
  <Skeleton style={styles.multiCompanyItemContainer}>
    <Skeleton.Item height={100} />
    <Skeleton.Item height={100} />
    <Skeleton.Item height={100} />
  </Skeleton>
);

export default MultiCompanyItem;