import React from "react";
import {avatarUrlGenerator} from "../utils/helpers";

//strings
import strings from "../constants/localization";

//actions

//components
import Container from "../../../Talk-ui-kit/src/container";
import Avatar, {AvatarImage} from "../../../Talk-ui-kit/src/avatar";
import {Text} from "../../../Talk-ui-kit/src/typography";
import Gap from "../../../Talk-ui-kit/src/gap";

//styling
import style from "../../styles/app/CallBoxRecording.scss";

//statics

//functions

export default function ({call}) {
  return <Container className={style.CallBoxRecording}>
    <Avatar>
      <AvatarImage src={avatarUrlGenerator(call.recording.image, avatarUrlGenerator.SIZES.SMALL)}
                   customSize="20px"/>
    </Avatar>
    <Gap x={2}/>
    <Text size="xs" invert>{strings.isRecordingCallSession(call.recording.name)}</Text>
  </Container>
}