import React from "react";
import strings from "../constants/localization";
import packageJson from "../../package.json";

//strings
import {CHAT_SETTING_KEYS} from "../constants/chatSettings";

//components
import {Text} from "../../../Talk-ui-kit/src/typography";
import Container from "../../../Talk-ui-kit/src/container";
import Image from "../../../Talk-ui-kit/src/image";
import Gap from "../../../Talk-ui-kit/src/gap";

//styling

//statics
import talkLogo from "../../styles/images/SupportModuleBadge/talk-logo.png";

export default function ({chatSettings}) {
  const {ABOUT_TALK} = chatSettings;

  const keys = CHAT_SETTING_KEYS.ABOUT_TALK;

  return <Gap x={20} y={20} block>
    <Container display="flex" alignItems="center" justifyContent="center" flexDirection="column">
      <Container>
        <Image src={talkLogo} style={{maxWidth: "200px"}}/>
      </Container>
      <Container>
        <Gap x={10}>
          <Text>{strings.chatSettings[keys.MAIN][ABOUT_TALK.TEXT]}</Text>
        </Gap>

        <Gap yt={10} block centerTextAlign>
          <Text color="gray" dark bold>{strings.version} {packageJson.version}</Text>
        </Gap>
      </Container>

    </Container>
  </Gap>
}