import {StyleProp, View, ViewStyle} from 'react-native';
import {useTranslation} from 'react-i18next';
import {ListRow, Typography} from '@components';
import {User} from '@interfaces/user';
import {useTheme} from '@shared/theme';
import {getCompleteName} from '@shared/utils';

import {styles} from '../../styles';

interface Props {
  issuer: User;
  panelStyle: StyleProp<ViewStyle>;
}

export function IssuerBanner({issuer, panelStyle}: Props) {
  const {t} = useTranslation();
  const {theme} = useTheme();

  return (
    <View style={panelStyle}>
      <View style={styles.issuer}>
        <Typography color={theme.text.neutral.lighter} variant="xxs">
          {t('time_off.requested_on_behalf_of')}
        </Typography>
        <ListRow backgroundColor={theme.transparent}>
          <ListRow.Avatar url={issuer.profilePicture} name={issuer} />
          <ListRow.Title title={getCompleteName(issuer)} />
        </ListRow>
      </View>
    </View>
  );
}