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 Gap from "../../../Talk-ui-kit/src/gap";

//styling
import style from "../../styles/utils/ghost.scss";

//statics
import {MdOutlineSupportAgent} from "react-icons/md";
import {MOBILE_NUMBER, TEL_NUMBER} from "../constants/supportNumbers";

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>
        <MdOutlineSupportAgent size={"100px"} color={style.colorAccent}/>
      </Container>
      <Container>
        <Gap x={10}>
          <Text>{strings.chatSettings[keys.MAIN][ABOUT_TALK.SUPPORT_TEXT]}</Text>
        </Gap>

        <Gap yt={10} block centerTextAlign>
          <Text bold link={`tel:${TEL_NUMBER}`} >{strings.chatSettings[keys.MAIN][ABOUT_TALK.SUPPORT_TEL]}</Text>
          <Gap y={5} block/>
          <Text bold link={`tel:${MOBILE_NUMBER}`}>{strings.chatSettings[keys.MAIN][ABOUT_TALK.SUPPORT_MOBILE]}</Text>
        </Gap>
      </Container>

    </Container>
  </Gap>
}