import { Dimensions, Text, TouchableOpacity, View } from "react-native";
import React from "react";
import { Props } from "./AnnouncementBanner.types";
import { styles } from "./AnnouncementBanner.styles";
import Calculater from "../../assets/ReactSVG/Calculater";
import CrossIcon from "../../assets/ReactSVG/CrossIcon";
import QuestIcon from "../../assets/ReactSVG/QuestIcon";

export default function AnnouncementBanners(Props: Props) {
  return (
    <View style={[styles.mainViewStyle, Props.style?.mainViewStyle]}>
      <View style={[styles.headerViewStyle, Props.style?.headerViewStyle]}>
        <Text style={[styles.headerTextStyle, Props.style?.headerTextStyle]}>
          {Props.title ? Props.title : " Let’s take a tour!"}
        </Text>
        <TouchableOpacity
          onPress={Props.onClose}
          style={[styles.crossViewStyle, Props.style?.crossViewStyle]}
        >
          <CrossIcon size={12} color="#FFFFFF" />
        </TouchableOpacity>
      </View>
      <Text style={[styles.welcomeTextStyle, Props.style?.welcomeTextStyle]}>
        Welcome {Props.userTitle ? Props.userTitle : "Matthew"}
      </Text>
      <View style={[styles.middelViewStyle, Props.style?.middelViewStyle]}>
        <View>
          <Text
            style={[
              styles.descriptionTextStyle,
              Props.style?.descriptionTextStyle,
            ]}
          >
            {Props.description
              ? Props.description
              : "Office vibes is the starting point to understand your team, so you can keep your team engaged"}
          </Text>
          <TouchableOpacity
            onPress={Props.onShow}
            style={[styles.buttonViewStyle, Props.style?.buttonViewStyle]}
          >
            <Text
              style={[styles.buttonTextStyle, Props.style?.buttonTextStyle]}
            >
              Show me around
            </Text>
          </TouchableOpacity>
        </View>
        <View style={[styles.iconViewStyle, Props.style?.iconViewStyle]}>
          <Calculater />
        </View>
      </View>
      <View style={{ justifyContent: "flex-end" }}>
        <View style={[styles.footerViewStyle, Props.style?.footerViewStyle]}>
          <Text style={[styles.footerTextStyle, Props.style?.footerTextStyle]}>
            Powered by Quest Labs
          </Text>
          <QuestIcon />
        </View>
      </View>
    </View>
  );
}